react-hook-youtube

A custom React hook for easily working with the Youtube Player API for iframe Embeds.

Example

Try it out on CodeSandbox!

Usage

Install the Hook

npm install react-hook-youtube

Use the Hook

Basic

import * as React from "react";
import { useYoutubePlayer } from "react-hook-youtube";

export default App = () => {
  const { YoutubePlayer } = useYoutubePlayer({
    videoId: "KRvv0QdruMQ", // https://www.youtube.com/watch?v=👉🏻dQw4w9WgXcQ👈🏻
  });

  return <YoutubePlayer />;
};

Advanced

import * as React from "react";
import { useYoutubePlayer } from "react-hook-youtube";

function App() {
  const [isReady, setIsReady] = React.useState(false);
  const [isPlaying, setIsPlaying] = React.useState(false);
  const [isMuted, setIsMuted] = React.useState(false);
  const { YoutubePlayer, player } = useYoutubePlayer({
    videoId: "KRvv0QdruMQ",
    height: "390",
    width: "640",
    events: {
      onReady: (event) => {
        console.log("OnReady event fired.", event);
        setIsReady(true);
      },
      onStateChange: (event) => {
        console.log("OnStateChange event fired.", event);
        setIsPlaying(event.data === 1);
      },
      onPlaybackQualityChange: (event) => {
        console.log("onPlaybackQualityChange event fired.", event);
      },
      onPlaybackRateChange: (event) => {
        console.log("OnPlaybackRateChange event fired.", event);
      },
      onError: (event) => {
        console.log("onError event fired.", event);
      },
      onApiChange: (event) => {
        console.log("onApiChange event fired.", event);
      },
    },
  });

  function handleMute() {
    if (player.isMuted()) {
      player.unMute();
      setIsMuted(false);
    } else {
      player.mute();
      setIsMuted(true);
    }
  }

  return (
    <div>
      <YoutubePlayer />

      {isReady && (
        <div>
          <section style={{ marginTop: "10px" }}>
            {isPlaying ? (
              <button onClick={player.pauseVideo}>Pause</button>
            ) : (
              <button onClick={player.playVideo}>Play</button>
            )}

            <button onClick={player.stopVideo}>Stop</button>
            <button onClick={handleMute}>{isMuted ? "Unmute" : "Mute"}</button>
          </section>
          <fieldset style={{ marginTop: "20px" }}>
            <legend>Select a playback speed</legend>

            <div>
              <input
                onChange={(e) => player.setPlaybackRate(+e.target.value)}
                type="radio"
                id="25"
                name="playbackSpeed"
                value=".25"
              />
              <label htmlFor="25">25%</label>
            </div>
            <div>
              <input
                onChange={(e) => player.setPlaybackRate(+e.target.value)}
                type="radio"
                id="50"
                name="playbackSpeed"
                value=".50"
              />
              <label htmlFor="50">50%</label>
            </div>
            <div>
              <input
                onChange={(e) => player.setPlaybackRate(+e.target.value)}
                type="radio"
                id="75"
                name="playbackSpeed"
                value=".75"
              />
              <label htmlFor="75">75%</label>
            </div>
            <div>
              <input
                onChange={(e) => player.setPlaybackRate(+e.target.value)}
                type="radio"
                id="100"
                name="playbackSpeed"
                value="1"
                defaultChecked={true}
              />
              <label htmlFor="100">Normal</label>
            </div>
            <div>
              <input
                onChange={(e) => player.setPlaybackRate(+e.target.value)}
                type="radio"
                id="125"
                name="playbackSpeed"
                value="1.25"
              />
              <label htmlFor="125">125%</label>
            </div>
            <div>
              <input
                onChange={(e) => player.setPlaybackRate(+e.target.value)}
                type="radio"
                id="150"
                name="playbackSpeed"
                value="1.5"
              />
              <label htmlFor="150">150%</label>
            </div>
            <div>
              <input
                onChange={(e) => player.setPlaybackRate(+e.target.value)}
                type="radio"
                id="175"
                name="playbackSpeed"
                value="1.75"
              />
              <label htmlFor="175">175%</label>
            </div>
            <div>
              <input
                onChange={(e) => player.setPlaybackRate(+e.target.value)}
                type="radio"
                id="200"
                name="playbackSpeed"
                value="2"
              />
              <label htmlFor="200">200%</label>
            </div>
          </fieldset>
        </div>
      )}
    </div>
  );
}

export default App;

Please refer to the Youtube Player API Reference for all of the available player config and player control options. This package also ships with TypeScript type definitions so you can just let Intellisense guide you.

Youtube Type Definitions

TODO: Document playlist usage