A full-fledged wrapper for the Youtube Player API created with the render props pattern.

https://btmpl.github.io/react-yt/

• playback of single video or supported lists (playlist, user uploads, search results),
• full access to the Youtube Player API inside the render prop,
• access to the player instance as an escape hatch,
• ability to control selected features as props to the component

$ yarn add react-yt

/**
 * We are using `module` field to provide an ES module format
 * and `main` field for an CommonJS fallback
 */
import YouTube from "react-yt";

<YouTube
  videoId={'SKGzIhOSQVY'}
  autoplay={true}
/>

The player accepts all the official player parameters as props.

Additionally it's possible to subscribe to the Player events by providing an events prop with following keys:

The render prop (render) will be called with an object exposing:

And all the internal Youtube player functions:

<YouTube
  videoId={'SKGzIhOSQVY'}
  render={({
    iframe,
    playVideo,
    pauseVideo,
    getPlayerState
  }) => (
    <div>
      {iframe}
      {getPlayerState() !== 1 && <button onClick={(event) => playVideo()}>Play video</button>}
      {getPlayerState() === 1 && <button onClick={(event) => pauseVideo()}>Pause video</button>}
    </div>
  )}
/>

While the recommended way to control the playback is from inside the render prop function, it is also possible to control the component from outside by changing the props. Developers are able to provide the following props in order to control the component without having to remount it.

The logic uses componentWillReceiveProps to control the playback, so passing the props in a given order will override older props. Passing new values to both props at the same time will give priority to the videoId prop.

MIT