Simple React component acting as a thin layer over the YouTube JS Player API
- url playback
- playback event bindings
- lazy API loading
$ npm install react-youtube
<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
/>
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} />
);
}
});
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.
MIT