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

公開済み: 2016年1月30日
更新: 2016年1月30日
作成者: fou
カテゴリー: jQuery
タグ: codepen, YoutubeAPI

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'
            }
        });
    };
});

$(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'

}

});

};

});

<div id="youtube-player"></div>

1	<div id="youtube-player"></div>

動作サンプル

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

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

この投稿へのコメント

コメントはありません。

コメントを残すコメントをキャンセル

この投稿へのトラックバック

【YoutubeAPI】 iPhoneやAndroidでplayVideo()が再生されず、読み込み中のままになる – へっぽこ開発室 said on 2016年2月1日 at 11:22 PM

[…] 先日の続きです。 YoutubeのプレーヤーAPIを使って簡単な再生プレーヤーを設置したのですが一部のスマホ端末で再生できない現象が出たので調査。 […]

トラックバック URL

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

対処法

動作サンプル

関連記事

関連記事

セレクトボックスを超高機能に jQueryプラグイン「Select2」

【YoutubeAPI】 iPhoneやAndroidでplayVideo()が再生されず、読み込み中のままになる

ブラウザ幅に応じてレウアウトをかっこよく調整、jQueryプラグイン「Isotope」

この投稿へのコメント

コメントを残す コメントをキャンセル

この投稿へのトラックバック

コメントを残すコメントをキャンセル