【React】ファイル選択ボタンをカスタマイズする
nanoha.creator@gmail.com
nanoha code
【React】react-youtubeでYoutube動画を埋め込む方法＆レスポンシブ対応
nanoha.creator@gmail.com
ReactにYoutubeを埋め込み、レスポンシブ対応する方法についてまとめました。
環境
私が試したときの環境のバージョンは、以下の通りです。
スタイリングには、tailwindcssを使用します。
| Next.js | 14.2.13 |
| React | 18.3.1 |
| tailwindcss | 3.4.4 |
実装
以下の手順で実装していきます。
- react-youtubeをインストールする
- Youtubeを埋め込む
- スタイルを調整する
公式ページに記載のある通りに進めます。
①react-youtubeをインストールする
以下のコマンドで、react-youtubeをインストールします。
npmの場合：
npm install react-youtubeyarnの場合：
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
フロントエンドエンジニア２年目｜ReactやTypeScriptなど、フロントエンドの情報を発信していきます
