@u-wave/react-youtube
@u-wave/react-youtube
npm i @u-wave/react-youtube
@u-wave/react-youtube

@u-wave/react-youtube

YouTube player component for React.

by u-wave

0.7.4 (see all)License:MITTypeScript:Built-InCategories:React Video Player
npm i @u-wave/react-youtube
Readme

@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.
https://developers.google.com/youtube/player_parameters#autoplay
showCaptionsboolfalseWhether to show captions below the video.
https://developers.google.com/youtube/player_parameters#cc_load_policy
controlsbooltrueWhether to show video controls.
https://developers.google.com/youtube/player_parameters#controls
disableKeyboardboolfalseIgnore keyboard controls.
https://developers.google.com/youtube/player_parameters#disablekb
allowFullscreenbooltrueWhether to display the fullscreen button.
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.
https://developers.google.com/youtube/player_parameters#hl
annotationsbooltrueWhether to show annotations on top of the video.
https://developers.google.com/youtube/player_parameters#iv_load_policy
startSecondsnumberTime in seconds at which to start playing the video.
https://developers.google.com/youtube/player_parameters#start
endSecondsnumberTime in seconds at which to stop playing the video.
https://developers.google.com/youtube/player_parameters#end
modestBrandingboolfalseRemove most YouTube logos from the player.
https://developers.google.com/youtube/player_parameters#modestbranding
playsInlineboolfalseWhether to play the video inline on iOS, instead of fullscreen.
https://developers.google.com/youtube/player_parameters#playsinline
showRelatedVideosbooltrueWhether to show related videos after the video is over.
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.
https://developers.google.com/youtube/iframe_api_reference#Playback_quality
playbackRatenumberPlayback speed.
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
  • 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

Downloads/wk

4.6K

GitHub Stars

120

LAST COMMIT

6mos ago

MAINTAINERS

1

CONTRIBUTORS

5

OPEN ISSUES

1

OPEN PRs

5
VersionTagPublished
0.7.4
latest
5mos ago
1.0.0-alpha.4
next
5mos ago
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate