実装

【React】react-youtubeでYoutube動画を埋め込む方法&レスポンシブ対応

【実装】react-youtubeでYoutube動画を埋め込む方法&レスポンシブ対応
nanoha.creator@gmail.com

ReactにYoutubeを埋め込み、レスポンシブ対応する方法についてまとめました。

環境

私が試したときの環境のバージョンは、以下の通りです。
スタイリングには、tailwindcssを使用します。

Next.js14.2.13
React18.3.1
tailwindcss3.4.4

実装

以下の手順で実装していきます。

  1. react-youtubeをインストールする
  2. Youtubeを埋め込む
  3. スタイルを調整する

公式ページに記載のある通りに進めます。

react-youtubeをインストールする

以下のコマンドで、react-youtubeをインストールします。

npmの場合:

npm install react-youtube

yarnの場合:

yarn add react-youtube

②Youtubeを埋め込む

Youtube動画を埋め込みたい場所に、以下のようにしてYoutubeコンポーネントを呼び出します。

Next.jsの場合は、クライアントコンポーネントで呼び出す必要があります。
"use client"の記述は必須です)

"use client";
import YouTube from "react-youtube";

export default function Page() {
  return <YouTube videoId="AvSBnfFjxRk" />;
}

videoIdは、埋め込みたいYoutubeのURLから取得できます。
例えば、以下のURLであれば、末尾のv=以降の文字列がvideoIdです。

https://www.youtube.com/watch?v=AvSBnfFjxRk

③スタイルを調整する

videoIdを指定したのみだと、横幅が640px固定となり、画面幅が狭いときに見切れたり、画面幅が広いときには左寄せになるので、調整します。

上記で記述したvideoIdのみを指定したYoutubeコンポーネントは、以下のように、div要素とiframe要素をhtmlに出力します。

<div class="">
  <iframe
    frameborder="0"
    allowfullscreen=""
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    referrerpolicy="strict-origin-when-cross-origin"
    title="【北欧旅行】ストックホルムの旧市街、ガムラ・スタンを観光!まるで魔女の宅急便の世界。|Visit Gamla Stan, Stockholm's Old Town"
    width="640"
    height="360"
    src="https://www.youtube.com/embed/AvSBnfFjxRk?enablejsapi=1&origin=http%3A%2F%2Flocalhost%3A3000&widgetid=3"
    id="widget4"
  ></iframe>
</div>;

div要素とiframe要素それぞれに以下のようにしてスタイルを追加します。

<YouTube
  videoId="AvSBnfFjxRk"
  iframeClassName="w-full h-full"
  className="w-full aspect-[640/360]"
/>

div要素に充てたいスタイルは、classNameに記述し、iframe要素に充てたいスタイルは、iframeClassNameに記述します。
(tailwindcssを使用しています)

divで全体の大きさを指定して、iframeは、divと同じ大きさになるように広げています。
後はお好みで調整してみてください。

その他にも、自動再生やループ再生などのパラメータもあるので、公式ページを見ながら試してみてください。

ABOUT ME
Haruna Abe
Haruna Abe
Webエンジニア
フロントエンドエンジニア2年目|ReactやTypeScriptなど、フロントエンドの情報を発信していきます
CONTACT

お問い合わせ

制作のお見積もりやご依頼、その他ご相談等ございましたら
お気軽にお問い合わせください。

    記事URLをコピーしました