ダボハゼのブログ
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;動画のレスポンシブ対応
ただ、上記だけだとレスポンシブに対応していないので下記記事を参考にレスポンシブ対応します。
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;