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.

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

この投稿へのコメント

コメントはありません。

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

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

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

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

トラックバック URL

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

対処法

動作サンプル

関連記事

関連記事

CSS3を使ったマウスオーバーフリップアニメーションと非対ブラウザ用にjqueryアニメーションのサンプルソース

【Movable Type】jqueryで新着投稿にnewマークを付ける

InstagramAPI 設置メモ。自分の投稿リストを取得するだけだったのにいろいろと面倒だったので、後からの覚書。

この投稿へのコメント

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

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

InstagramAPI　設置メモ。自分の投稿リストを取得するだけだったのにいろいろと面倒だったので、後からの覚書。

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