react-youtubeライブラリの導入

最終更新日： 2023年5月10日（水）
公開日： 2023年2月8日（水）

こんにちは。デザイン・システム室の中島です。

私は9月に実務未経験で入社し、弊社のサービスである「旬をすぐに」サイトの開発に携わっています。「旬をすぐに」の開発に携わるまではReactを扱ったことがなかったのですが、日々案件をこなす中で少しずつ理解し扱えるようになってまいりました。

この記事では、react-youtubeライブラリを用いたyoutubeの動画の埋め込み機能の導入を紹介いたします。先日「旬をすぐに」のサービスの中にyoutubeを挿入した際に使用したのですが、好きな動画を好きなところに入れ込める楽しい機能になっているので、ぜひご覧いただけると幸いです！

手順

1. react-youtubeライブラリのインストール
2. コンポーネントへの挿入
3. オプションの設定
4.レスポンシブ対応

インストール

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

$ npm i react-youtube

または

$ yarn add react-youtube@7.9.0    //バージョン指定

コンポーネントへの挿入

youtubeコンポーネントを作成します。
videoIdに挿入したいyoutubeのURL末尾を入力すると、対応するyoutube動画が埋め込まれます。

import React from 'react';
import Youtube from 'react-youtube';

function youtube () {
    return (
      <Youtube 
      videoId= "13yytDs4TeQ"　　//挿入したいyoutube動画のURL末尾を入力
        />
    );
  }
export default youtube;

import React from 'react';
import Test from './Test';
import Youtube from './Youtube';

const Top = () => {

  return(
        <Test />
        <Youtube/>
        <Test/>
)}
export default Top;

下記のようにyoutube動画が埋め込まれました！

オプションの設定

youtubeの埋め込みが完了したので、再生するyoutubeのオプションを設定していきます。
今回は、動画を自動再生し、かつループ再生させる設定を行いました。
その他のオプションはYouTube 埋め込みプレーヤーとプレーヤーのパラメータで確認することができます。
※autoplay: 1で自動再生の設定をしていますが、多量のデータ通信量の使用を防ぐため、スマホでは自動再生がおこなわれないようになっています。また、PCを使用した再生はミュート再生となります。（参照）

function youtube() {

    const opts = {
      playerVars: {
      playsinline: 1,       
      autoplay: 1,　　　　　
      mute: 1,              
　    loop: 1, 　　　　　　　　
    }, 
  }
    return (
      <Youtube 
      videoId= "13yytDs4TeQ"
      opts={opts}
        />
    );
  }
export default youtube;

playsinline
インライン再生(default: 0)
autoplay
自動再生(default: 0)
mute
ミュート再生(default: 0)
loop
ループ再生（最初に再生された動画が繰り返し再生される。default: 0）

レスポンシブ対応

レスポンシブ対応ができるよう、Youtube.scssファイルを作成し、以下のscssを設定しました。
今回はスマホでの利用を想定したため、タブレットビュー以下のブレイクポイントとして767pxをブレイクポイントに設定しました。

import React from 'react';
import Youtube from 'react-youtube';
import { useSelector } from 'react-redux';
import '~/shop_styles/tops/Youtube.scss';

function youtube() {

    const opts = {
        playerVars: {
        playsinline: 1,         //インライン再生
        autoplay: 1,            // 自動再生
        mute: 1,                //ミュート再生
        loop: 1,                //ループ再生
        width: '640',
        height: '360',
      }, 
  }
    return (
      <Youtube 
      videoId= "13yytDs4TeQ"
      opts={opts}
      className="iframe" 
      containerClassName="youtube"

        />
    );
  }

  export default youtube;

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

@media screen and (max-width:767px){
    .iframe{
        position: relative;
        iframe{
            width:100% !important;
            height:100% !important;    
        }
    }
}

レスポンシブ対応後の画面表示は以上の通りです。
無事レスポンシブ対応が完了しました。
以上でreact-youtubeを用いたyoutubeの動画の埋め込みは終了です。

まとめ

react-youtubeライブラリを用いると、比較的容易にyoutubeの埋め込み動画を挿入することができました。
今回はURL末尾をベタ打ちして指定し表示させましたが、ReduxのStoreでデータ管理をしていれば、useSelectorを用いてStoreに保存されているstateデータにアクセスし、所定のデータに対応するyoutubeのURL末尾を指定することも可能です。
また、動画のプロパティも今回紹介したもののみならず、動画の再生時や停止時に関数を実行するもの(onPlay, onPause, etc.)や、プレイリストの再生(playlist)など様々な細かい設定ができるのでぜひ試してみてください。

現在デザイン・システム室では、新しいメンバーを募集しています。
少しでも興味を持たれた方、ぜひご応募ください。
お待ちしております🤖

<参考文献>

https://www.npmjs.com/package/react-youtube

https://developers.google.com/youtube/player_parameters?hl=ja#playlist

https://developers.google.com/youtube/iframe_api_reference?hl=ja#Queueing_Functions

（最終閲覧日:2023/01/31）

募集要項およびエントリーフォーム