WebサイトにYouTube動画を表示する：JS制御編

Posted by OONISHI on Mar 17th, 2023

「WebサイトにYouTube動画を表示する」第3弾 JS制御編です。
これまで「基本編」「パラメータ制御編」と題し、埋め込み用コードを利用して静的にYouTube動画を表示する方法をご紹介しました。
今回は、IFrame Player APIを利用して動的にYouTube動画を表示する方法をご紹介します。

プレーヤーを動的に制御することで、静的な埋め込みではできなかった柔軟な対応が可能になります。

基本実装

STEP1：動画を埋め込む場所を指定

<div class="youtube">
  <div id="movie"></div>
</div>

<div id="movie"></div>の部分がiframeタグに変換されます。（id名は任意）
<div class="youtube">は、基本編で紹介した「レスポンシブWebデザイン」のために使用します。
こちらでも同様にレスポンシブ対応用のCSSを追加しましょう。

.youtube{
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-bottom: 56.25%;
}

.youtube iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none; /*境界線の打ち消し*/
}

STEP2：IFrame Player API を読み込む

</body>の直前にscriptタグを設置し、その中に必要な記述を追加します。
まずは、IFrame Player API を読み込みます。

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

STEP3：動画の埋め込み

次に、動画を埋め込むための記述を追加します。
リファレンスではwidth heightの指定がありますが、レスポンシブ対応によって幅・高さが可変するのでこれらを設定する必要はありません。

var player; // 変数を用意
function onYouTubeIframeAPIReady() {
  player = new YT.Player('movie', { // 'movie'はSTEP1で生成したdivタグのid名を指定
    videoId: '_4UTQy1GaYQ' // 埋め込む動画のID
  });
}

これでWebサイトにYouTube動画を埋め込むことができます。

オプション設定

JSからの埋め込みでもパラメータ付与と同じ制御が可能です。
オプションを設定する際は、以下のようにオブジェクトを追加します。

var player; // 変数を用意
function onYouTubeIframeAPIReady() {
  player = new YT.Player('movie', { // 'movie'はSTEP1で生成したdivタグのid名を指定
    videoId: '_4UTQy1GaYQ', // 埋め込む動画のID
    playerVars: {
      // ここにオブジェクトを追加
      'autoplay': 1,
      'controls': 0
    }
  });
}

例えば、パラメータ制御編で紹介した「単一動画をループさせる」場合は、以下のように設定します。

var player; // 変数を用意
function onYouTubeIframeAPIReady() {
  player = new YT.Player('movie', { // 'movie'はSTEP1で生成したdivタグのid名を指定
    videoId: 'eIW4zMLc-_4', // 埋め込む動画のID
    playerVars: {
      'loop': 1, // ループ再生を有効にする
      'playlist': 'eIW4zMLc-_4' // 再生する動画のIDを指定
    }
  });
}

パラメータ付与で設定できる機能はすべて使えるので、動的な埋め込みでも変わりなく設定することができます。

プレーヤーの操作

IFrame Player API で用意されている関数を呼び出すことで、読み込んだプレーヤーを制御することができます。
多くの関数がありここで全てを説明することはできないので、本記事ではよく使用されるものを一部紹介します。

関数	操作内容
`player.playVideo()`	頭出し済み、または読み込み済みの動画を再生します。
`player.pauseVideo()`	再生中の動画を一時停止します。
`player.stopVideo()`	現在の動画の読み込みを停止してキャンセルします。
`player.clearVideo()`	動画の表示をクリアします。
`player.nextVideo()`	再生リストの次の動画を読み込んで再生します。
`player.previousVideo()`	再生リストの前の動画を読み込んで再生します。
`player.mute()`	プレーヤーをミュートします。

IFrame Player API リファレンス > 関数

これによりこちらのタイミングでプレーヤーを操作できるようになるので、例えばパラメータ制御だけではできなかった「動画の位置までスクロールされたらプレーヤーを自動再生する」といった実装が可能になります。

イベントの追加

IFrame Player API による埋め込みでは、動画プレーヤーの変化を検知することができます。
検知できる動作は以下です。

イベントハンドラ	発生タイミング
`onReady`	プレーヤーが読み込みを完了し、API 呼び出しの受信を開始する準備ができると起動
`onStateChange`	プレーヤーの再生状態が変わると起動します。
`onPlaybackQualityChange`	プレーヤーの再生画質が変わると起動します。
`onPlaybackRateChange`	プレーヤーの再生速度が変わると起動します。
`onError`	プレーヤーでエラーが発生すると起動します。
`onApiChange`	モジュールがロードまたはアンロードされたとき起動します。

IFrame Player API リファレンス > イベント

再生に関する上から4つのイベントを使用したデモページを用意しました。
実際に操作して挙動を確かめてみてください。

→ デモページを見る

完結！

「基本編」から「JS制御編」まで、3記事にわたってYouTube動画の埋め込み方法をご紹介しました。

1記事目の公開からだいぶ時間が経ってしまいましたが、依然としてYouTubeの需要は増すばかりですね。
2022年10月時点で国内のアクティブユーザー数は7,000万人に上るそうです。

機能の追加や変更があれば、また記事に起こしたいと思います。

はてな