Skip to content

sempixel/react-youtube

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-youtube player component

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

Features

Installation

$ npm install react-youtube

Usage

<YouTube
  url={string}            // required
  id={string}             // defaults -> 'react-yt-player'
  opts={obj}              // defaults -> {}
  onReady={func}          // defaults -> noop
  onPlay={func}           // defaults -> noop
  onPause={func}          // defaults -> noop
  onEnd={func}            // defaults -> noop
  onError={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 url={'http://www.youtube.com/watch?v=2g811Eo7K8U'}
               opts={opts}
               onPlay={this._onPlay}
      />
    );
  }

  _onPlay(event) {
    console.log('PLAYING');

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

Note: Whenever a new url is passed into the component, the previous player is destroyed and a new one created. Meaning, if you're storing the player inside of state, you'll want to replace it whenever the onReady event handler is called.

Note: player.addEventListener, player.removeEventListener, and player.destroy are used internally, using these outside the component may cause problems.

License

MIT

About

react.js powered YouTube player component

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%