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.

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

この投稿へのコメント

コメントはありません。

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

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

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

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

トラックバック URL

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

対処法

動作サンプル

関連記事

関連記事

javascrip：ハッシュタグからイベント情報を取得

QRコード 作成方法・webサービスサイト・ツールのまとめ

wordpress記事の外部リンクにファビコンを表示

この投稿へのコメント

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

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

QRコード作成方法・webサービスサイト・ツールのまとめ

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