Package Exports
- react-youtube-player
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-youtube-player) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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
}
}
/>./example/ demonstrates how to control a react-youtube-player component using property values that are controlled using user input.