@u-wave/react-youtube

@u-wave/react-youtube

YouTube player component for React.

Install - Usage - Demo - Props

Install

npm install --save @u-wave/react-youtube

Usage

Demo - Demo source code

import YouTube from '@u-wave/react-youtube';

<YouTube
  video="x2to0hs"
  autoplay
/>

Props

Name	Type	Default	Description
video	string		An 11-character string representing a YouTube video ID..
id	string		DOM ID for the player element.
className	string		CSS className for the player element.
style	object		Inline style for container element.
width	number, string		Width of the player element.
height	number, string		Height of the player element.
paused	bool		Pause the video.
autoplay	bool	false	Whether the video should start playing automatically. https://developers.google.com/youtube/player_parameters#autoplay
showCaptions	bool	false	Whether to show captions below the video. https://developers.google.com/youtube/player_parameters#cc_load_policy
controls	bool	true	Whether to show video controls. https://developers.google.com/youtube/player_parameters#controls
disableKeyboard	bool	false	Ignore keyboard controls. https://developers.google.com/youtube/player_parameters#disablekb
allowFullscreen	bool	true	Whether to display the fullscreen button. https://developers.google.com/youtube/player_parameters#fs
lang	string		The player's interface language. The parameter value is an ISO 639-1 two-letter language code or a fully specified locale. https://developers.google.com/youtube/player_parameters#hl
annotations	bool	true	Whether to show annotations on top of the video. https://developers.google.com/youtube/player_parameters#iv_load_policy
startSeconds	number		Time in seconds at which to start playing the video. https://developers.google.com/youtube/player_parameters#start
endSeconds	number		Time in seconds at which to stop playing the video. https://developers.google.com/youtube/player_parameters#end
modestBranding	bool	false	Remove most YouTube logos from the player. https://developers.google.com/youtube/player_parameters#modestbranding
playsInline	bool	false	Whether to play the video inline on iOS, instead of fullscreen. https://developers.google.com/youtube/player_parameters#playsinline
showRelatedVideos	bool	true	Whether to show related videos after the video is over. https://developers.google.com/youtube/player_parameters#rel
showInfo	bool	true	Whether to show video information (uploader, title, etc) before the video starts. This parameter has been deprecated and has no effect. https://developers.google.com/youtube/player_parameters#showinfo
volume	number		The playback volume, as a number between 0 and 1.
muted	bool		Whether the video's sound should be muted.
suggestedQuality	string		The suggested playback quality. https://developers.google.com/youtube/iframe_api_reference#Playback_quality
playbackRate	number		Playback speed. https://developers.google.com/youtube/iframe_api_reference#setPlaybackRate
onReady	function		Sent when the YouTube player API has loaded.
onError	function		Sent when the player triggers an error.
onCued	function	() => {}	Sent when the video is cued and ready to play.
onBuffering	function	() => {}	Sent when the video is buffering.
onPlaying	function	() => {}	Sent when playback has been started or resumed.
onPause	function	() => {}	Sent when playback has been paused.
onEnd	function	() => {}	Sent when playback has stopped.
onStateChange	function
onPlaybackRateChange	function
onPlaybackQualityChange	function

Related

• react-dailymotion - A Dailymotion component with a similar declarative API.
• @u-wave/react-vimeo - A Vimeo component with a similar declarative API.
• react-youtube - A widely-used YouTube component. Its API matches the YouTube iframe API more closely, and it doesn't support prop-based volume/quality/playback changes.

License

MIT

Changelog

0.7.2 - 2020-10-21

• Allow React 17 in peerDependency range.
• Test with React 16 and React 17 on CI.