Docusaurus - integracja z YouTube

Na pierwszej stronie Docusaurus widnieje ramka z filmem z YouTube. Jak to zrobić? W tym wpisie opiszę jak zintegrować Docusaurus z YouTube, bo jak się okazuje, nie jest to takie trudne, lecz, aby osiagnąć wszystkie funkcjonalności, takie jak np. wyświetlanie filmu na pełnym ekranie, musimy przestrzegać zasad, które wcale nie wydają się oczywiste. Spędziłem nad tym kilka godzin, zanim udało mi się osiągnąć spodziewany efekt, więc postanowiłem podzielić się tą wiedzą z innymi.

Wskazówka AI

😂 Gdy piszę ten artykuł AI (Gemini Code Asisst) podpowiada mi, że w pierwszej kolejności musisz zainstalować paczkę react-youtube. Możesz to zrobić za pomocą polecenia npm install react-youtube i dodać import import YouTube from 'react-youtube'; w pliku, w którym chcesz umieścić film z YouTube.

Nie przeszedłem tej ścieżki rozwiązania, bo dowiedziałem się o niej w tej chwili, ale polecam sprawdzić, czy to nie jest lepsze rozwiązanie.

Ja zdecydowałem się na użycie komponentu YouTube stworzonego przeze mnie. W pliku _functions.js umieściłem komponent YouTube, który wygląda tak:

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>
);

Następnie w plikach MDX, w których chcę umieścić film z YouTube, importuję ten komponent:

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

i go używam z odpowiednimi parametrami. Na przykład:

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

I to wszystko. Teraz możecie cieszyć się filmem z YouTube na waszej stronie tak jak ja w artykule WebSphere - ręczne generowanie heap, thread i core dumpów.