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

「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万人に上るそうです。

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

関連記事