react-youtube 
Simple React component acting as a thin layer over the YouTube IFrame Player API
Features
- url playback
- playback event bindings
- customizable player options
Installation
$ npm install react-youtube Usage
<YouTube videoId={string} // defaults -> null id={string} // defaults -> null className={string} // defaults -> null containerClassName={string} // defaults -> '' opts={obj} // defaults -> {} onReady={func} // defaults -> noop onPlay={func} // defaults -> noop onPause={func} // defaults -> noop onEnd={func} // defaults -> noop onError={func} // defaults -> noop onStateChange={func} // defaults -> noop onPlaybackRateChange={func} // defaults -> noop onPlaybackQualityChange={func} // defaults -> noop />For convenience it is also possible to access the PlayerState constants through react-youtube: YouTube.PlayerState contains the values that are used by the YouTube IFrame Player API.
Example
import React from 'react'; import YouTube from 'react-youtube'; class Example extends React.Component { render() { const opts = { height: '390', width: '640', playerVars: { // https://developers.google.com/youtube/player_parameters autoplay: 1 } }; return ( <YouTube videoId="2g811Eo7K8U" opts={opts} onReady={this._onReady} /> ); } _onReady(event) { // access to player in all event handlers via event.target event.target.pauseVideo(); } } Controlling the player
You can access & control the player in a way similar to the official api:
The
APIcomponent will pass an event object as the sole argument to each ofthose functionsthe event handler props. The event object has the following properties:
- The event's
targetidentifies the video player that corresponds to the event.- The event's
dataspecifies a value relevant to the event. Note that theonReadyevent does not specify adataproperty.
License
MIT
