YOUTUBE動画の埋め込みに使えるYouTube Player APIですが、iframeをHTMLに直書きするやり方がなかなか見つからなかったのメモです。見つからなかったとは言いますがあまり記述方法は変わりませんでした。
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がループさせづらいものの場合は、何個も書くか配列で持つとよいかもしれません。
参考サイト
jQueryの中では使えない
この表現がただしいのかと詳細がわからないのですが、jQueryの$(function(){・・・});の中ではこのapiは使えませんでした。どうしても使いたい場合はeventsで呼び出される関数の中で、あらためて$(function(){・・・});を使用して記述すると動きました。
コメント