Videojs-youtube: How to config with VideoJS in ReactJS

Question

I want to create a Video Player in ReactJS with VideoJS that can run with a Youtube link

I followed the instruction in VideoJS Guide Page with the functional component (https://videojs.com/guides/react/#react-functional-component-and-)

But I don't know how to integrate videojs-youtube(https://github.com/videojs/videojs-youtube) as a plugin that can use in techOrder.

{
  autoplay: true,
  controls: true,
  responsive: true,
  fluid: true,
  sources: [
    {
      type: 'video/youtube',
      src: 'https://www.youtube.com/watch?v=kjlu9RRHcbE',
    },
  ],
  techOrder: ['html5', 'youtube'],
}

I tried some solutions by adding a script into body but didn't work

Screenshot of error

Answer 1

https://codesandbox.io/s/react-video-js-youtube-example-n4xp91

(video playback not currently working within sandbox, but the code will work locally)

npm install video.js
npm install videojs-youtube

then if you're using a later version of video.js (versions >= 6), it's just a matter of importing the plugin:

import "videojs-youtube";

and the plugin initializes itself.

It's important any source that is a Youtube video, is set with type: "video/youtube" as well.

import { useEffect, useRef } from "react";
import videojs from "video.js";
import "videojs-youtube";
import "video.js/dist/video-js.css";

const initialOptions = {
  controls: true,
  fluid: true,
  controlBar: {
    volumePanel: {
      inline: false
    }
  }
};

const videoJsOptions = {
  sources: [
    {
      type: "video/youtube", //important
      src: "https://www.youtube.com/watch?v=GlhV-OKHecI"
    }
  ]
};

export default function App() {
  const videoNode = useRef(null);
  const player = useRef(null);
  const initialized = useRef(false);

  useEffect(() => {
    if (videoNode.current && !initialized.current) {
      initialized.current = true; //prevent duplicate initialization
      player.current = videojs(videoNode.current, {
        ...initialOptions,
        ...videoJsOptions
      }).ready(function () {
        console.log("Player Ready");
      });
    }
    //clear up player on dismount
    return () => {
      if (player.current) {
        player.current.dispose();
      }
    };
  }, []);

  return (
    <div className="App">
      <video ref={videoNode} className="video-js" />
    </div>
  );
}