ReactでYouTubeの動画を埋め込む

ReactでYouTubeの動画を埋め込むには「react-youtube」を使用します。 npmのコマンドでreact-youtubeをインストールします。

npm i react-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;

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

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

react-youtubeの仕様についてはこちらをご覧ください。

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

にほんブログ村