JSPM

  • Created
  • Published
  • Downloads 517802
  • Score
    100M100P100Q165452F
  • License MIT

react.js powered YouTube player component

Package Exports

  • react-youtube

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-youtube) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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