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

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

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

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

npm i react-youtube

YouTubeの動画を埋め込む

単純に埋め込むだけならApp.jsを下記のようにすればできます！

import YouTube from 'react-youtube';

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

export default App;

動画のレスポンシブ対応

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

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


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

export default App;

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

クラス名の指定の他にも動画が再生されたら実行する関数の指定や自動再生の指定などできます。

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

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('動画の再生が終了したら実行される関数');
}

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

export default App;

動画のオプションを指定

動画のオプションを指定する場合は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',
  }
}

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

export default App;

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

にほんブログ村