iframeで埋め込んだYouTube動画をJavaScriptで操作。

iframeで埋め込んだYouTube動画の再生・停止などを、自サイトにはIFrame Player APIのファイルを組み込まずにJavaScriptで動的に操作する方法のメモ。

iframeで取得表示されたYouTubeのwindowオブジェクトを取得し、postMessage()メソッドでAPIのコマンドを送信して操作する。

1. 埋め込むiframeにJavaScript APIの使用を許可するパラメーターを付与。
2. iframe内で表示している外部サイト(YouTube)のwindowオブジェクトを取得。
3. 取得したwindowオブジェクトにpostMessageメソッドでAPIのコマンドを送信。

HTMLに埋め込みコードとコントローラー要素を記述

iframeの埋め込みコードにAPIの使用を許可するパラメーター「enablejsapi=1」を付与する。このパラメーターを付与しない場合、デフォルトは「0」で使用不可。

※ allow属性などのオプションは任意。

//通常の埋め込みコードにクエリを付与
<iframe id="任意のid名" width="560" height="315" src="https://www.youtube.com/embed/動画のID?enablejsapi=1" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

//クリックイベントで動画を操作するための要素
<div id="ytplay">再生</div>
<div id="ytpause">一時停止</div>
<div id="ytstop">停止</div>
<div id="ytclear">クリア</div>
<div id="ytseek">シークバー移動</div>
<div id="ytmute">ミュート</div>
<div id="ytunmute">アンミュート</div>
<div id="ytvolume">音量を設定</div>

iframe内のwindowオブジェクトの取得と操作コマンドの送信

iframe内でYouTubeを表示しているwindowオブジェクトに、使用したいAPIのコマンドをpostMessage()メソッドで送信することで、間接的に動画を操作することができる。

JavaScriptで処理を実装

コントローラーとして用意したHTMLの各要素のクリックイベントが発生したら、該当する操作コマンドを引数に指定してpostMessage()メソッドを実行。

1. IFrameオブジェクトのcontentWindowプロパティーで、iframeに表示している外部サイト(今回はYouTube)のwindowオブジェクトを取得。
2. 取得したwindowオブジェクトに、postMessage()メソッドでYouTubeのAPIの操作コマンドを送信。

const ytiframe= 'iframeタグに付けた任意のid名';
//iframeで表示しているwindowオブジェクトを取得
const targetWindow = document.getElementById(ytiframe).contentWindow;

//APIのコマンドを送信する関数
const ag2ytControl = function(action,arg=null){
  targetWindow.postMessage('{"event":"command", "func":"'+action+'", "args":'+arg+'}', '*');
};

//クリックイベントで動画を操作
//再生
document.getElementById('ytplay').addEventListener('click', function(event){
  ag2ytControl('playVideo');
});
//一時停止
document.getElementById('ytpause').addEventListener('click', function(event){
  ag2ytControl('pauseVideo');
});
//停止
document.getElementById('ytstop').addEventListener('click', function(event){
  ag2ytControl('stopVideo');
});
//シークバーの移動
document.getElementById('ytseek').addEventListener('click', function(event){
  //(secondsパラメータ : 指定の秒数の位置へ移動, allowSeekAheadパラメータ : 未バッファの位置の場合に新しいリクエストを行うか)
  ag2ytControl('seekTo','[60,true]');
});
//クリア
document.getElementById('ytclear').addEventListener('click', function(event){
  ag2ytControl('clearVideo');
});
//ミュート
document.getElementById('ytmute').addEventListener('click', function(event){
  ag2ytControl('mute');
});
//アンミュート
document.getElementById('ytunmute').addEventListener('click', function(event){
  ag2ytControl('unMute');
});
//音量を設定
document.getElementById('ytvolume').addEventListener('click', function(event){
  //(volume : 0～100の整数値を指定)
  ag2ytControl('setVolume','[50]');
});

iframe要素.contentWindow : iframe要素で表示しているコンテキストのwindowを返す。

対象window.postMessage(メッセージ, ターゲットURI) : windowオブジェクト間で安全にクロスドメイン通信をする。ターゲットURIが正しいか確認してから対象のwindowにメッセージ(データオブジェクト)を送信する。「*」指定はワイルドカード。

• 【JS】YouTubeのiframe埋め込み動画をJSでコントロール