【jQuery】YouTube iframe Player APIを使って画面全体に動画を流す方法

こんにちは！さこちゃんです。

今回は「YouTube iframe Player APIを使って画面全体に動画を流す方法」についてです。

まろんちゃん

YouTube動画を画面いっぱいに流したい！けど難しそう・・・

さこちゃん

YouTube iframe Player APIを使えば簡単に実装できるよ〜

YouTube iframe Player APIを使えば、誰でも超簡単にWebサイトにYouTube動画を埋め込むことが可能です。

今回の記事はこんな方におすすめです。

WebサイトにYouTube動画を自動再生で埋め込みたい
ループ再生・音声ミュートなどの細かい設定もしたい
HTMLのiframeだけでは物足りないけど、ライブラリまでは使いたくない
YouTube iframe Player APIの基本的な使い方を知りたい

・・・目次・・・

YouTube iframe Player APIってなに？
デモ紹介
HTMLを記述する
CSSをあててゆく〜
JSを記述する
同一ページ内で複数動画を埋め込みたい場合
おわりに

YouTube iframe Player APIってなに？

YouTube iframe Player API とは、JavaScriptを使ってYouTube動画をWebページ上で自由に制御できるGoogle公式のAPIです。

単にYoutubeの動画をWebページに表示したいのであれば、<iframe>でも可能ですが、APIを使えばより高度な設定が可能になります。

APIを使うことで、例えばこんな機能をつけることが可能です。

ページ読み込み時に自動再生
音声をミュート
永遠にループ
コントロールバーを非表示
関連動画の非表示

デモ紹介

今回完成を目指すデモはこちら。

それではさっそく実装していきます〜〜〜

HTMLを記述する

STEP1　jQueryを読み込む

まずはjQueryを読み込みましょう〜
これがないと動きませんので忘れずに！

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

最新のjQueryはこちらからとってね
>>　jQuery公式ページ

STEP2　HTMLの基本構造を作る

基本的なHTML構造はこちらです。
超絶シンプルです。

<div class="yt-wrapper">
    <div class="yt-inner">
        <!--youtube表示エリア-->
        <h1>ここにタイトルが入ります</h1>
        <div id="player01"></div>

        <!--youtubeマスクエリア--> 
        <div class="player-mask"></div>
    </div>
</div>

player01にyoutubeリンクを埋め込むことで、動画が表示される仕組みです。

ポイントは、youtube表示エリアとマスクエリアを作ることです。
マスクエリアは、再生されているyoutube動画が不本意にクリック（一時停止など）されないために必要になります。

CSSをあててゆく〜

まずはyoutube表示エリアから整えていきましょう。

/*タイトル調整*/
h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  color: #FFF;
  text-shadow: 0 0 5px rgba(0, 0, 0, .7);
}

/*基点の指定*/
.yt-wrapper {
  position: relative;
}

/*動画を固定*/
.yt-inner {
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
  opacity: 0;
}

/*jQueryで付与されたis-appearクラスがついたらYoutubeエリアをふわっと表示*/
.yt-inner.is-appear {
  animation-name: PageAnimeAppear;
  animation-duration: .5s;
  animation-fill-mode: forwards;
}
@keyframes PageAnimeAppear {
　0% {
　　opacity: 0;
　}
　100% {
　　opacity: 1;
　}
}

/*動画の表示位置を調整*/
#player01 {
  /*天地中央配置*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*縦横幅指定*/
  width: 177.77777778vh; /* 640:360の幅 → 640 ÷ 360＝ 177.77% */
  height: 56.25vw; /* 640:360の幅 → 360 ÷ 640= 56.25% */
  min-height: 100%;
  min-width: 100%;
}

ポイントは縦横幅の指定です。
デモで使用している動画のデフォルト幅は640:360なので、これをもとに数値を計算しています。
この数値が正確でないと全画面表示されませんので、ご注意を！

次にyoutubeマスクエリアのCSSを追記します。
コードはこれだけ。

/*youtubeがクリックされないためのマスク*/
.player-mask {
  position: absolute;
  z-index: 2;/*下から2番目に表示*/
  top: 0;
  width: 100%;
  height: 100%;
}

マスクがなければ、動画をクリックした際に一時停止してしまいます。
このような不本意な操作を防ぐためにマスクの記述は必須です。

JSを記述する

最後に動きを制御していきましょう〜
コードはこちら。

// Youtubeエリアをふわっと表示する記述
$(window).on('load', function () {
    $(".yt-inner").addClass('is-appear');
});

// YouTube Player APIの記述
var ytData = [{
    id: 'FFBBa6r_inI',
    area: 'player01'
}];

var ytPlayer = [];

// YouTube Player APIを読み込む
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// API読み込み後に、各エリアにプレーヤーを埋め込む
function onYouTubeIframeAPIReady() {
    for (var i = 0; i < ytData.length; i++) {
        ytPlayer[i] = new YT.Player(ytData[i]['area'], {
            videoId: ytData[i]['id'],
            playerVars: {
                playsinline: 1, // インライン再生を行う
                autoplay: 1, // 自動再生を行う
                fs: 0, //全画面表示ボタンを表示しない    
                rel: 0, // 再生中の動画と同じチャンネルの関連動画を表示
                controls: 0, // プレーヤー コントロールを表示しない
                modestbranding: 1, // YouTubeロゴの非表示
                iv_load_policy: 3, // アノテーションの非表示
                start: 50, // 50秒後から動画がスタート
            },
            events: {
                'onReady': onPlayerReady, // 動画プレーヤーの準備が完了し再生可能な状態である場合に発動
                'onStateChange': onPlayerStateChange // プレーヤーの状況が変化した時に発動
            }
        });
    }
}

// ミュートにしてから再生する設定
function onPlayerReady(event) {
    event.target.mute();
    event.target.playVideo();
}


// ループ設定
function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
        event.target.playVideo();
    }
}

playerVars（オプション）箇所を調整次第では、自由にカスタマイズが可能です。
代表的なオプションは下記になります。

オプション名	内容
`autoplay`	自動再生を有効にするかどうか（`1`で自動再生、`0`でしない）
`controls`	プレーヤーのコントロール表示（`0`: 非表示、`1`: 表示）
`loop`	動画をループ再生
`rel`	終了時に関連動画を表示するか（`0`で同一チャンネルの動画のみ）
`modestbranding`	YouTubeロゴの最小化（`1`でロゴを非表示。ただし一部制限あり）

同一ページ内で複数動画を埋め込みたい場合

その場合は、ytData箇所を下記のように追記するだけでOKです。

var ytData = [
　{
    id: 'FFBBa6r_inI',
    area: 'player01'
　},
　{
    id: 'FFBBa6r_inI', // 任意のリンクを入れてね
    area: 'player02'
　},
　{
    id: 'FFBBa6r_inI', // 任意のリンクを入れてね
    area: 'player03'
　},
];

これで複数の動画管理が可能になります。

おわりに

いかがでしたか？
YouTube動画を簡単にWebページへ埋め込む方法をご紹介しました。
iframeよりも自由度が高いので、Web制作の場で大活躍すること間違いなしです。
これを機に使ってみてくださいね。

最後までご覧いただきありがとうございました！