YoutubeAPI インターネットエクスプローラー10でwindow.onYouTubeIframeAPIReadyがフックしないとき
IE10にて起きた現象で、YoutubeAPIのwindow.onYouTubeIframeAPIReady
が作動しない不具合がでました。
ブラウザを更新すると動作しなかったりで安定しなかったので対処法。
対処法
どうもIE10だとドキュメントの読み込みとyoutubeAPIのonYouTubeIframeAPIReadyが実行されるタイミングがうまくかみ合わないようなので、jqueryでお馴染みの$(document).ready(function () {});で記述することにしたら安定しました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$(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' } }); }; }); |
1 |
<div id="youtube-player"></div> |
動作サンプル
See the Pen YoutubeAPI DEMO by フォウ (@pan64501) on CodePen.
やったことは簡単だけどメモしておきます。
この投稿へのトラックバック
-
-
[…] 先日の続きです。 YoutubeのプレーヤーAPIを使って簡単な再生プレーヤーを設置したのですが一部のスマホ端末で再生できない現象が出たので調査。 […]
-
- トラックバック URL
この投稿へのコメント