Skip to content
react.js powered YouTube player component
Branch: master
Clone or download
Pull request Compare This branch is 1 commit ahead, 17 commits behind tjallingt:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
example
src
test
.babelrc
.eslintignore
.eslintrc
.gitignore
.npmignore
.travis.yml
LICENSE
README.md
package.json
yarn.lock

README.md

react-youtube Build Status

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

You can’t perform that action at this time.