Nutella with Pepperoni and Mushrooms

    react-youtube
    TypeScript icon, indicating that this package has built-in type declarations

    10.0.0 • Public • Published

    Release Tests Example

    react-youtube

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

    Features

    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

    Install

    npm i react-youtube

    DownloadsWeekly Downloads

    219,538

    Version

    10.0.0

    License

    MIT

    Unpacked Size

    31.9 kB

    Total Files

    5

    Last publish

    Collaborators

    • tjallingt