react-youtube-player

React component that encapsulates YouTube IFrame Player API and exposes player controls using the component properties.

Implementation

componentDidMount callback is used to replace the rendered element with an iframe that loads a YouTube Player.

componentWillReceiveProps is used to detect when component properties change, compare them with the state of the YouTube Player and call YouTube IFrame Player API when necessary.

Usage

import YoutubePlayer from 'react-youtube-player';

/**
 * @typedef {string} YoutubePlayer~playbackState
 * @value 'unstarted' Stops and cancels loading of the current video. [stopVideo]{@link https://developers.google.com/youtube/iframe_api_reference#stopVideo}
 * @value 'playing' Plays the currently cued/loaded video. [playVideo]{@link https://developers.google.com/youtube/iframe_api_reference#playVideo}
 * @value 'paused' Pauses the currently playing video. [pauseVideo]{@link https://developers.google.com/youtube/iframe_api_reference#pauseVideo}
 */

/**
 * @property {string} videoId
 * @property {string|number} width (default: '100%').
 * @property {string|number} height (default: '100%').
 * @property {YoutubePlayer~playbackState} playbackState
 * @property {Object} configuration Configuration parameters to be passed to the YouTube Player (known as `playerVars` in the YouTube Player API for iframe Embeds, https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#Parameters).
 */
<YoutubePlayer
    videoId=''
    playbackState='unstarted'
    configuration={
        {
            showinfo: 0,
            controls: 0
        }
    }
/>

Demo

To run the demo:

npm install
npm run build
npm run demo