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

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

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

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関数に動画を埋め込む処理を書く

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

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

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

window.onPlayerReady = function(event){
};

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

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