youtubeのAPIがIEの11.0.9600でうまく動作しない問題の解決方法

youtubeのAPIで、
onPlayerReadyやonPlayerStateChangeなどを使ったページを作った時、
IE11の特定のバージョンで動作しなかったので、解決方法を。

html5モードを強制にする

ただし、IE8以前で動作しなくなることが予想されるので、
そこだけは注意が必要。

下記ソース8行目
‘html5’: 1
がミソ。
他の値は全然違うものでも構わない。

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      playerVars: {
        'html5': 1
      },
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

参考ページ

http://stackoverflow.com/questions/25041745/youtube-iframe-api-onstatechange-not-firing-in-firefox

どうやって判明したのか?

まずは、該当の動かないブラウザで、
下記ページにアクセスする。
https://www.youtube.com/html5
「html5プレイヤーを利用する」
を選択する。

これで、問題があるページの不都合が解決したので、
yotubeの一部APIは、html5プレイヤーでないと正確に動作しないのだろうと当たりをつけた。
問題が起こるバージョンののIEにおいて、
何も設定しないとデフォルトプレイヤーを利用する設定になっているのではないか?
ということで、強制的にhtml5モードを有効にする方法を探したら前述の結果になった。

投稿者:

ayako0802

フロントエンドエンジニア