react-youtube

What is react-youtube?

The react-youtube npm package is a React component for embedding YouTube videos. It provides a simple way to integrate YouTube videos into your React applications with various customization options and event handling capabilities.

What are react-youtube's main functionalities?

Embedding a YouTube Video

This feature allows you to embed a YouTube video in your React application. The `opts` object is used to customize the player, such as setting the height, width, and player variables like autoplay.

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

const MyComponent = () => {
  const opts = {
    height: '390',
    width: '640',
    playerVars: {
      autoplay: 1,
    },
  };

  return <YouTube videoId="2g811Eo7K8U" opts={opts} />;
};

export default MyComponent;

Handling Events

This feature allows you to handle various events from the YouTube player. In this example, the `onReady` event is used to pause the video as soon as it is ready.

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

const MyComponent = () => {
  const onReady = (event) => {
    event.target.pauseVideo();
  };

  return <YouTube videoId="2g811Eo7K8U" onReady={onReady} />;
};

export default MyComponent;

Customizing Player Options

This feature allows you to customize various player options such as autoplay, controls, and related videos. The `playerVars` object is used to set these options.

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

const MyComponent = () => {
  const opts = {
    height: '390',
    width: '640',
    playerVars: {
      autoplay: 1,
      controls: 0,
      rel: 0,
    },
  };

  return <YouTube videoId="2g811Eo7K8U" opts={opts} />;
};

export default MyComponent;

Other packages similar to react-youtube

react-player

react-player is a React component that can play various types of media, including YouTube videos, Vimeo videos, SoundCloud tracks, and more. It offers a broader range of media support compared to react-youtube, which is specifically for YouTube videos.

react-youtube-lite

react-youtube-lite is a lightweight alternative to react-youtube. It focuses on providing a minimalistic and fast-loading YouTube player component for React applications. It is suitable for use cases where performance and simplicity are prioritized over extensive customization options.

README

react-youtube

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

Features

• url playback
• playback event bindings
• customizable player options

Installation

NPM

npm install react-youtube

Yarn

yarn add react-youtube

PNPM

pnpm add react-youtube

Usage

<YouTube
  videoId={string}                  // defaults -> ''
  id={string}                       // defaults -> ''
  className={string}                // defaults -> ''
  iframeClassName={string}          // defaults -> ''
  style={object}                    // defaults -> {}
  title={string}                    // defaults -> ''
  loading={string}                  // defaults -> undefined
  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

// js
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();
  }
}

// ts
import React from 'react';
import YouTube, { YouTubeProps } from 'react-youtube';

function Example() {
  const onPlayerReady: YouTubeProps['onReady'] = (event) => {
    // access to player in all event handlers via event.target
    event.target.pauseVideo();
  }

  const opts: YouTubeProps['opts'] = {
    height: '390',
    width: '640',
    playerVars: {
      // https://developers.google.com/youtube/player_parameters
      autoplay: 1,
    },
  };

  return <YouTube videoId="2g811Eo7K8U" opts={opts} onReady={onPlayerReady} />;
}

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