#026
posted on 2021.02.06

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で処理を実装

各ボタンのクリックイベントが発生したら、該当する操作コマンドを引数に指定して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にメッセージ(データオブジェクト)を送信する。「*」指定はワイルドカード。

 

 

この記事をシェア
この記事のURL

https://memo.ag2works.tokyo/post-1283/

コピー
この記事のタイトル

iframeで埋め込んだYouTube動画をJavaScriptで操作。 | memo メモ [AG2WORKS]

コピー
この記事のリンクタグ

<a href="https://memo.ag2works.tokyo/post-1283/" target="_blank" rel="noopener">iframeで埋め込んだYouTube動画をJavaScriptで操作。 | memo メモ [AG2WORKS]</a>

コピー
※ フィールドをクリックでコピーするテキストの編集ができます。

この記事へのコメント

コメントの書き込みはまだありません。

  • コメント内のタグはエスケープ処理され、文字列として出力されます。
  • セキュリティーのため、投稿者のIPアドレスは取得されます。
  • 管理者が内容を不適切と判断したコメントは削除されます。
  • このフォームにはスパム対策として、Googleの提供するreCAPTCHAシステムが導入されています。
    (Google Privacy Policy and Terms of Service.)