YouTube IFrame Player APIの使い方 2021

フロントエンド JavaScript

こんにちは、ナカムラです。
今回はYouTubeのIFrame Player APIの使い方のご紹介です。
ご紹介といっても基本機能の使い方なので、リファレンスを読めばわかる程度のものです。
普段あまり使っていないので、いざ使うときにリファレンスを読むのがしんどくて・・自分がよく使うであろう基本の部分をまとめたいと思います。

IFrame Player APIとは？

Youtubeが提供しているIframeで動画の組み込みをするAPIです。
一番簡単な使い方だとYoutubeの動画ページにある「共有」＞「動画の埋め込み」で提供されているものです。
この場合はiframeタグをコピペするだけでWEBページへ動画を表示させることができます。

単純に表示させたいだけならこれで十分ですが、
何かをしたタイミングで再生・一時停止などの操作をしたい場合などは
javascriptで動画を生成するところから書いてしまった方が作りやすかったりします。

というわけで、APIの読み込み、動画の組み込み、動画の操作の３つに分けて説明していきます。

DEMO

See the Pen YouTube APIの使い方_blog用 by Nakamura (@takayo-nakamura) on CodePen.

APIの読み込み

まずはAPIの読み込みからです。
scriptタグを生成し、APIのURLを付与していきます。
生成したscriptタグを挿入して、APIの読み込み部分の完成です。

// IFrame Player API の読み込みタグを挿入
const tag = document.createElement('script') // scriptタグを生成
tag.src = "https://www.youtube.com/iframe_api"  // APIのURLを付与
const firstScriptTag = document.getElementsByTagName('script')[0] // 生成したタグをセット
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag) // HTML上に挿入

リファレンス：はじめに

動画の組み込み

では、APIを使って動画を組み込みましょう。
変数playerを用意し、APIが読み込まれて準備が整ったら、YT.Playerオブジェクトを作成します。
videoIdの値に、表示させたい動画のIDを入れれば組み込みの完了です。
デモのplayerVarsにはよく使う設定を入れていますが、なくてもOKです。
注意点があるので、この後説明します。

リファレンスではwidthとheightも入れていますが、何も入れなければデフォルトの640*360pxで表示されます。
レスポンシブサイトではCSSで調整してしまうので、オプションとしては入れなくても良いかなと思います。
必要なら入れてください。

// 関数onYouTubeIframeAPIReadyでiframeとYoutubeプレイヤーを作成
let player // 変数playerを用意
function onYouTubeIframeAPIReady() { // APIが読み込まれて準備が整ったら実行される関数
  player = new YT.Player('player', { // YT.Playerオブジェクトを作成（'player'は動画の挿入先のid名）
    videoId: 'M7lc1UVf-VE',
    playerVars: {
      // 'autoplay': 1,
      // 'mute': 1,
      // 'controls': 0,
      'loop': 1,
      'playlist': 'M7lc1UVf-VE',
      //'rel': 0
    },
  })
}

リファレンス：動画プレーヤーの読み込み

playerVarsの注意点

autoplayは1で自動再生されますが、同時にmuteも1にして有効にしないと自動再生されません。
スマホの場合はそもそも自動再生ができない仕様です。

loopも1で有効ということになりますが、playlistで動画のIDも指定する仕様になっています。

relは再生終了後に関連動画を表示するかどうかの指定になります。
0にすると再生した動画と同じチャネルから関連動画が選択されます。
何かしらの関連動画は表示されてしまいますので、何も見せたくない場合はループにするか、再生終了のタイミングで最初に戻すなどのイベント処理が必要になります。

リファレンス：
モバイルの注意事項
サポートされるパラメータ

動画の操作

何かしらのタイミングで動画を止めたり、再生したりしたい時の書き方です。
今回はボタンをクリックした時に実行したいと思います。

STOP：動画の停止
PAUSE：動画の一時停止
PLAY：動画の再生

以上の３つです。

ボタンの要素を取得し、addEventListenerでクリックした時にそれぞれの処理を実行させます。

// 動画の操作
const stopButton = document.getElementById('stopMovie')
const pauseButton = document.getElementById('pauseMovie')
const playButton = document.getElementById('playMovie')

stopButton.addEventListener('click', ()=> {
  player.stopVideo()
})

pauseButton.addEventListener('click', ()=> {
  player.pauseVideo()
})

playButton.addEventListener('click', ()=> {
  player.playVideo()
})

リファレンス：再生の制御とプレーヤーの設定

今回はボタンのクリックをトリガーとしていますが、
前回の記事でご紹介したIntersection Observer APIと組み合わせれば、
画面内に表示されたら再生、表示されなくなったら停止、といったことができます。

前回の記事

tech.arms-soft.co.jp

以上、IFrame Player APIの使い方でした。
この他はリファレンスを読んでいろいろ試してみてください。