# react-youtube

**Repository Path**: mirrors_gaearon/react-youtube

## Basic Information

- **Project Name**: react-youtube
- **Description**: react.js powered YouTube player component
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-08
- **Last Updated**: 2026-05-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

react-youtube player component
=============================

Simple [React](http://facebook.github.io/react/ ) component acting as a thin layer over the [YouTube JS Player API](https://developers.google.com/youtube/js_api_reference)

## Features
- url playback
- playback event bindings
- lazy API loading

## Installation

```
$ npm install react-youtube
```

Usage
----
```js
<YouTube 
  url={string}         // required
  id={string}          // defaults -> 'react-yt-player'
  autoplay={bool}      // defaults -> false
  onPlayerReady={func} // defaults -> noop
  onVideoReady={func}  // defaults -> noop
  onPlay={func}        // defaults -> noop
  onPause={func}       // defaults -> noop
  onEnd={func}         // defaults -> noop
/> 
```

Example
-----

```js
var React = require('react');
var YouTube = require('react-youtube');

var Example = React.createClass({
  _onPlay: function() {
    console.log('PLAYING');
  },

  render: function() {
    return (
      <YouTube url={'http://www.youtube.com/watch?v=2g811Eo7K8U'} 
               onPlay={this._onPlay} />
    );
  }
});

```

## Caveat

 Programmatic control of the player as outlined in the [API docs](https://developers.google.com/youtube/js_api_reference) isn't included.

If decide to take control of it, be aware that the react-youtube uses `loadVideoById`, `cueVideoById`, `addEventListener` and `removeEventListener` internally. 

Using these methods outside the component may cause problems. 

# License

  MIT