react-youtube

YouTube player component for React.

@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.
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.
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.
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.
onPlay 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

License

MIT

Related Repositories

vuejs-learn

vuejs-learn

(vue.js official website tutorials ,contains video , codes, baudi yun, youtube) 网路上有很多 VUE 综合应用的视频,但大部份的视频 ,都当你已经了解官网 所以讲的节奏难免偏快。 此视频(都是上代码),以官网为重,将官网的观念,以视频搭配代码,实际演示。 如果官网有看不懂的地方,比对一下,视频跟代码,就会了解了。 减少你摸索的时间。(註:mvvm 的框架,不管是 ng , react, vue, avalonjs, 都是好的框 ...

react-js-tutorials

react-js-tutorials

Code that goes along with my YouTube React JS Series ...

react-youtube

react-youtube

react.js powered YouTube player component ...

react-player

react-player

A react component for playing a variety of URLs, including file paths, YouTube, SoundCloud and Vimeo ...

react-native-youtube

react-native-youtube

A <YouTube/> component for React Native. ...