gaearon / react-youtube

react.js powered YouTube player component

react-youtube player component

Simple React component acting as a thin layer over the YouTube JS Player API

Features

• url playback
• playback event bindings
• lazy API loading

Installation

$ npm install react-youtube

Usage

<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

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 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