Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including react-youtube with all npm packages installed. Try it out:

require("@types/youtube/package.json"); // @types/youtube is a peer dependency. require("react/package.json"); // react is a peer dependency. var reactYoutube = require("react-youtube")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-youtube v7.13.0

React.js powered YouTube player component

Release Tests Example


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



$ npm install react-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.


import React from 'react';
import YouTube from 'react-youtube';

class Example extends React.Component {
  render() {
    const opts = {
      height: '390',
      width: '640',
      playerVars: {
        autoplay: 1,

    return <YouTube videoId="2g811Eo7K8U" opts={opts} onReady={this._onReady} />;

  _onReady(event) {
    // access to player in all event handlers via;

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.



RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free