YOUTUBEのiframeを直書きしてapiを使う方法

YOUTUBE動画の埋め込みに使えるYouTube Player APIですが、iframeをHTMLに直書きするやり方がなかなか見つからなかったのメモです。見つからなかったとは言いますがあまり記述方法は変わりませんでした。

iframeの設置
apiを使えるようにする
javascript
動画を複数設置する場合
jQueryの中では使えない
1. 関連投稿:

iframeの設置

まずは普通にiframeを設置します。
動画ページの共有から埋め込むを選択するとiframeのコードが表示されるのでそれをコピペします。

<iframe width="560" height="315" src="https://www.youtube.com/embed/IDを入れる" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

apiを使えるようにする

このままだとapiは使えないため、iframeのsrcのURLにステータスを追加します。

<iframe id="player" width="560" height="315" src="https://www.youtube.com/embed/WG4_wgc1Snc?enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

?enablejsapi=1を追加しました。

また、idを設定しないと動かなかったのでidを追加しました。これでapiを使う準備ができました。

javascript

あとはJavaScriptをがんばって書いていきます。公式にコードがあるので、そちらを参考に以下のように記述。

//api用のJSを読み込む
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",{
	events: {
        'onReady': onPlayerReady,//API呼び出しの受信を開始する準備ができると起動
        'onStateChange': onPlayerStateChange// プレーヤーの状態が変わると起動
      }
	});
  }

//関数
function onPlayerReady(event) {
event.target.playVideo();
}

//関数（以下は再生後2秒で止まる）
var done = false;
function onPlayerStateChange(event) {console.log(3);
if (event.data == YT.PlayerState.PLAYING && !done) {
  setTimeout(stopVideo, 2000);
  done = true;
}
}
function stopVideo() {
player.stopVideo();
}

「player」という箇所がiframeに指定したidになります。
上記のコードでは、読み込み後すぐに動画再生し、2秒後に停止します。

サンプルページ

参考サイト

動画を複数設置する場合

複数動画を設置する場合は、iframeにそれぞれidを設定し、for文などでonYouTubeIframeAPIReadyの中身をループさせて実行させます。
以下はidをそれぞれiframe0・iframe1・・・と想定したものです。

//onYouTubeIframeAPIReadyの中身だけ抜粋
var iframeNum = 1;//2つの場合は1
var player;
function onYouTubeIframeAPIReady() {
	for(var i = 0; i < iframeNum; i++) {//ループ
		player = new YT.Player("iframe" + i ,{
			events: {
				'onReady': onPlayerReady,
				'onStateChange': onPlayerStateChange
			}
		});
	}
}

idがループさせづらいものの場合は、何個も書くか配列で持つとよいかもしれません。

参考サイト