【React】YouTubeの動画を埋め込む方法

React（Next.js）でYouTubeの動画を埋め込むにはライブラリ「react-youtube」を使用します。
（react-youtubeの仕様についてはこちらをご覧ください。）

ライブラリのインストール

まず下記コマンドでreact-youtubeをインストールします。

npm i react-youtube
もしくは
yarn add react-youtube

YouTubeの動画を埋め込む

単純に埋め込むだけなら下記のようにYouTubeコンポーネントを読み込み、videoIdにYouTubeの動画IDをすれば実現できます！

import YouTube from 'react-youtube';

const YouTube = () => {
  return (
    <YouTube videoId="動画ID" />
  );
}

export default YouTube;

動画のレスポンシブ対応

ただ、上記だけだとレスポンシブに対応していないので下記記事を参考にレスポンシブ対応します。

YouTube 動画埋め込みのレスポンシブ対応方法

src配下にYoutube.module.cssというファイルを作ります。

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

App.jsを下記のように修正します。

import YouTube from 'react-youtube';
import style from './Youtube.module.css';


const YouTube = () => {
  return (
    <YouTube videoId="G1cC45Mr0HU" className={style.iframe} containerClassName={style.youtube} />
  );
}

export default YouTube;

これでレスポンシブ対応ができました。

クラス名の指定の他にも

動画再生時などに関数を実行

「動画が再生されたとき」などに関数を実行することもできます。

import YouTube from 'react-youtube';
import style from './Youtube.module.css';

const _onReady = (event) => {
  console.log('動画が準備が完了したら実行される関数');
}

const _onPlay = (event) => {
  console.log('動画が再生されたら実行される関数');
}

const _onPause = (event) => {
  console.log('動画が停止されたら実行される関数');
}

const _onEnd = (event) => {
  console.log('動画の再生が終了したら実行される関数');
}

const YouTube = () => {
  return (
    <YouTube videoId="G1cC45Mr0HU" className={style.iframe} containerClassName={style.youtube} onReady={_onReady} onPlay={_onPlay} onPause={_onPause} onEnd={_onEnd} />
  );
}

export default YouTube;

動画のオプションを指定

動画のオプションを指定する場合はoptに指定します。

下記は動画を自動再生＋ループ再生するオプションを指定しています。

YouTubeの動画埋め込みで指定できるオプションはこちらをご覧ください。

import YouTube from 'react-youtube';
import style from './Youtube.module.css';

function App() {
  const opts = {
    playerVars: {
    autoplay: 1, // 自動再生
    mute: 1, // 音声をミュート
    playsinline: 1, // インライン再生
    loop: 1, // 動画を繰り返し再生
    playlist: 'G1cC45Mr0HU', // 再生する動画のリストをIDで指定(カンマ区切り)
  }
}

  return (
    <YouTube videoId="G1cC45Mr0HU" className={style.iframe} containerClassName={style.youtube} opts={opts} />
  );
}

export default App;

↓↓「にほんブログ村」のランキングに参加しています。少しでも面白い、参考になったとか思われたらポチッとしていただけると嬉しいです！

にほんブログ村