Docusaurus - YouTube integration

On the first page of Docusaurus there is a frame with a YouTube video. How to do it? In this post I will describe how to integrate Docusaurus with YouTube, because as it turns out, it is not that difficult, but to achieve all the functionalities, such as displaying the video in full screen, we have to follow the rules, which do not seem obvious at all. I spent a few hours on it before I managed to achieve the expected effect, so I decided to share this knowledge with others.

AI Tip

😂 As I write this article AI (Gemini Code Asisst) tells me that first of all you need to install the react-youtube package. You can do this with the command npm install react-youtube and add import import YouTube from 'react-youtube'; in the file where you want to place the YouTube video.

I didn't go through this solution path because I found out about it just now, but I recommend checking if it's not a better solution.

I decided to use the YouTube component I created. In the _functions.js file I placed the YouTube component, which looks like this:

export const YouTube = ({children, clipId, title, lang}) => (
  <span>
    <iframe
      class
      title={title}
      height="547px"
      width="100%"
      frameborder="0"
      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen="true"
      src={'https://www.youtube.com/embed/' + clipId + '?autoplay=0&state=1&autohide=1&showinfo=1&rel=0&hl=' + lang + '&persist_hl=1&cc_load_policy=1&cc_lang_pref=' + lang + ''}
      >
    </iframe>
  </span>
);

Then in the MDX files where I want to embed the YouTube video, I import this component:

import { YouTube } from '../_functions.js';

and I use it with the appropriate parameters. For example:

<YouTube
  clipId="LPsrwKN22IQ"
  title="WebSphere - Generating Thread Dumps"
  lang="en"
  >
</YouTube>

And that's it. Now you can enjoy the YouTube video on your site just like I did in the article WebSphere - generating heap, thread and core dumps manually.