HTMLに直接記述したYouTubeのiframeをJavaScriptで操作する

HTMLにiframeで直接埋め込んだYouTubeをJavaScriptで操作したいということがあったので、実装方法をメモ。

サンプルコード

まずはHTMLにiframeを埋め込みます。
埋め込みたい動画のページにアクセスして、共有 > 埋め込む からタグをコピーします。
タグを埋め込むHTMLに貼り付け、以下のように書き換えます。

// 書き換え前
<iframe width="560" height="315" src="https://www.youtube.com/embed/Kp4KP-HsV8o" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
↓
// 書き換え後
<iframe id="player" width="560" height="315" src="https://www.youtube.com/embed/Kp4KP-HsV8o?enablejsapi=1&origin=http%3A%2F%2Fcly7796.net" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

以下の2点を変更しています。

• idを追加(JavaScriptで操作するときに使います。)
• URLにパラメータとして「enablejsapi」と「origin」を追加

enablejsapiはAPIを有効にするために必要で1を指定、originはセキュリティ強化のための設定で自分のドメインを指定します。

今回はサンプルとしてボタンクリック時に再生をしてみるので、合わせてボタンも設置しておきます。

<iframe id="player" width="560" height="315" src="https://www.youtube.com/embed/Kp4KP-HsV8o?enablejsapi=1&origin=http%3A%2F%2Fcly7796.net" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<button id="play">再生</button>

次にJavaScriptです。
基本的には通常APIを使う時と同じような形で設定できます。

// 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読み込み後にプレーヤーの設定
var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player');
}

// ボタンクリック時の操作
document.getElementById('play').addEventListener('click', function() {
  player.playVideo();
}, false);

ポイントは10行目で、通常ここで動画IDやサイズなどを指定するのですが、今回はiframeで指定しているのですべて省略しています。
これでボタンクリックするとYouTubeが再生されるようにできました。
iframe直接埋め込みのデモページ
　

【参考サイト】

• iframe 組み込みの YouTube Player API リファレンス  |  YouTube IFrame Player API  |  Google Developers
• YouTube 埋め込みプレーヤーとプレーヤーのパラメータ  |  YouTube IFrame Player API  |  Google Developers