JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 3168
  • Score
    100M100P100Q132719F
  • License MIT

YouTube player component for React.

Package Exports

  • @u-wave/react-youtube
  • @u-wave/react-youtube/package.json

Readme

@u-wave/react-youtube

YouTube player component for React.

Install - Usage - Demo - Component API - Hook API

Install

npm install @u-wave/react-youtube

Usage

Demo - Demo source code

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

<YouTube
  video="x2to0hs"
  autoplay
/>

<YouTube />

The <YouTube /> component renders an iframe and attaches the YouTube player to it. It supports all the same options as the useYouTube hook, plus a few to configure the iframe. If you need to do more with the iframe than this component provides, consider using the useYouTube hook directly.

Props

Name Type Default Description
id string DOM ID for the player element.
className string CSS className for the player element.
style object Inline style for container element.
video string An 11-character string representing a YouTube video ID..
width number, string Width of the player element.
height number, string Height of the player element.
host string https://www.youtube.com YouTube host to use: 'https://www.youtube.com' or 'https://www.youtube-nocookie.com'.
origin string The YouTube API will usually default this value correctly. It is exposed for completeness.
https://developers.google.com/youtube/player_parameters#origin
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
volume number The playback volume, as a number between 0 and 1.
muted bool Whether the video's sound should be muted.
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

useYouTube(container, options)

Create a YouTube player at container. container must be a ref object.

Returns the YT.Player object, or null until the player is ready.

import { useYouTube } from '@u-wave/react-youtube';

function Player() {
  const container = useRef(null);
  const player = useYouTube(container, {
    video: 'x2to0hs',
    autoplay: true,
  });
  console.log(player?.getVideoUrl());
  return <div ref={container} />;
}

Options

Name Type Default Description
video string An 11-character string representing a YouTube video ID..
width number, string Width of the player element.
height number, string Height of the player element.
host string https://www.youtube.com YouTube host to use: 'https://www.youtube.com' or 'https://www.youtube-nocookie.com'.
origin string The YouTube API will usually default this value correctly. It is exposed for completeness.
https://developers.google.com/youtube/player_parameters#origin
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
volume number The playback volume, as a number between 0 and 1.
muted bool Whether the video's sound should be muted.
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
  • 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.
  • @u-wave/react-vimeo - A Vimeo component with a similar declarative API.

License

MIT