YoutubeAPI インターネットエクスプローラー10でwindow.onYouTubeIframeAPIReadyがフックしないとき

IE10にて起きた現象で、YoutubeAPIのwindow.onYouTubeIframeAPIReadyが作動しない不具合がでました。
ブラウザを更新すると動作しなかったりで安定しなかったので対処法。

対処法

どうもIE10だとドキュメントの読み込みとyoutubeAPIのonYouTubeIframeAPIReadyが実行されるタイミングがうまくかみ合わないようなので、jqueryでお馴染みの$(document).ready(function () {});で記述することにしたら安定しました。

$(document).ready(function () {
    var tag = document.createElement('script');
    tag.src = "http://www.youtube.com/iframe_api/";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var youtubePlayer;

    window.onYouTubeIframeAPIReady = function () {
        youtubePlayer = new YT.Player('youtube-player', {
            height: '400',
            width: '800',
            videoId: 'ビデオID',
            playerVars: {
                showinfo: 0, //タイトルバーを非表示にする
                rel: 0, //関連動画」を非表示にする
                wmode: 'transparent'
            }
        });
    };
});

動作サンプル

See the Pen YoutubeAPI DEMO by フォウ (@pan64501) on CodePen.

やったことは簡単だけどメモしておきます。