Awesome
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