Home

Awesome

@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

NameTypeDefaultDescription
videostringAn 11-character string representing a YouTube video ID..
idstringDOM ID for the player element.
classNamestringCSS className for the player element.
styleobjectInline style for container element.
widthnumber, stringWidth of the player element.
heightnumber, stringHeight of the player element.
pausedboolPause the video.
autoplayboolfalseWhether the video should start playing automatically.<br>https://developers.google.com/youtube/player_parameters#autoplay
showCaptionsboolfalseWhether to show captions below the video.<br>https://developers.google.com/youtube/player_parameters#cc_load_policy
controlsbooltrueWhether to show video controls.<br>https://developers.google.com/youtube/player_parameters#controls
disableKeyboardboolfalseIgnore keyboard controls.<br>https://developers.google.com/youtube/player_parameters#disablekb
allowFullscreenbooltrueWhether to display the fullscreen button.<br>https://developers.google.com/youtube/player_parameters#fs
langstringThe player's interface language. The parameter value is an ISO 639-1 two-letter language code or a fully specified locale.<br>https://developers.google.com/youtube/player_parameters#hl
annotationsbooltrueWhether to show annotations on top of the video.<br>https://developers.google.com/youtube/player_parameters#iv_load_policy
startSecondsnumberTime in seconds at which to start playing the video.<br>https://developers.google.com/youtube/player_parameters#start
endSecondsnumberTime in seconds at which to stop playing the video.<br>https://developers.google.com/youtube/player_parameters#end
modestBrandingboolfalseRemove most YouTube logos from the player.<br>https://developers.google.com/youtube/player_parameters#modestbranding
playsInlineboolfalseWhether to play the video inline on iOS, instead of fullscreen.<br>https://developers.google.com/youtube/player_parameters#playsinline
showRelatedVideosbooltrueWhether to show related videos after the video is over.<br>https://developers.google.com/youtube/player_parameters#rel
volumenumberThe playback volume, as a number between 0 and 1.
mutedboolWhether the video's sound should be muted.
suggestedQualitystringThe suggested playback quality.<br>https://developers.google.com/youtube/iframe_api_reference#Playback_quality
playbackRatenumberPlayback speed.<br>https://developers.google.com/youtube/iframe_api_reference#setPlaybackRate
onReadyfunctionSent when the YouTube player API has loaded.
onErrorfunctionSent when the player triggers an error.
onCuedfunction() => {}Sent when the video is cued and ready to play.
onBufferingfunction() => {}Sent when the video is buffering.
onPlayingfunction() => {}Sent when playback has been started or resumed.
onPausefunction() => {}Sent when playback has been paused.
onEndfunction() => {}Sent when playback has stopped.
onStateChangefunction
onPlaybackRateChangefunction
onPlaybackQualityChangefunction

Related

License

MIT