[JavaScript][YouTube]iframeを使った動的埋め込み

どうやらiframeを使った埋め込み方法がバージョンアップしたようだ。

まず、非同期でscriptを読み込む

1 2 3 4

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の準備が整った時点で呼ばれるonYouTubeIframeAPIReady関数に動画を埋め込む処理を書く

1 2 3 4 5 6 7 8 9 10 11

window.onYouTubeIframeAPIReady = function() {   new YT.Player('player', {     height: '390',     width: '640',     videoId: 'Ma5xXTEMBJs',     events: {       'onReady': onPlayerReady,       'onStateChange': onPlayerStateChange     }   }); }

第一引数には、動画を設置するidを設定する。
(上の場合は、id="player")
eventsキーには、動画の準備が整った時に呼び出される関数をonReadyキーに登録し、動画の状態が変化した時に呼び出される関数をonStateChangeに登録する。

で、下のように、それぞれの関数を実装する。

1 2	window.onPlayerReady = function(event){ };

1 2 3 4 5 6 7 8 9 10

window.onPlayerStateChange = function(event){   /*   YT.PlayerState.ENDED   YT.PlayerState.PLAYING   YT.PlayerState.PAUSED   YT.PlayerState.BUFFERING   YT.PlayerState.CUED   */   console.log(event.data) };

flashを使わない分、読み込み早いかもしれない。