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

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

Features

Installation

$ npm install react-youtube

Usage

<YouTube
  videoId={string}                  // defaults -> null
  id={string}                       // defaults -> unique id starting with "player_"
  className={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
/>

Example

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 ~~API~~ component will pass an event object as the sole argument to each of ~~those functions~~ the event handler props. The event object has the following properties:

The event's target identifies the video player that corresponds to the event.

The event's data specifies a value relevant to the event. Note that the onReady event does not specify a data property.

License

MIT