JavaScript HTML
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


YouTube player component for React.

Install - Usage - Demo - Props


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


Demo - Demo source code

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



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.
width union Width of the player element.
height union Height of the player element.
paused bool Pause the video.
autoplay bool false Whether the video should start playing automatically.
showCaptions bool false Whether to show captions below the video.
controls bool true Whether to show video controls.
disableKeyboard bool false Ignore keyboard controls.
allowFullscreen bool true Whether to display the fullscreen button.
lang string The player's interface language. The parameter value is an ISO 639-1 two-letter language code or a fully specified locale.
annotations bool true Whether to show annotations on top of the video.
startSeconds number Time in seconds at which to start playing the video.
endSeconds number Time in seconds at which to stop playing the video.
modestBranding bool false Remove most YouTube logos from the player.
playsInline bool false Whether to play the video inline on iOS, instead of fullscreen.
showRelatedVideos bool true Whether to show related videos after the video is over.
showInfo bool true Whether to show video information (uploader, title, etc) before the video starts.
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.
playbackRate number Playback speed.
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