youtube iframeがアクセス拒否され、すべての要素が表示されない。

Youtubeのiframeタグを埋め込んだhtmlファイルでindex.htmlからaタグでそのYoutubeのiframeが埋め込まれているhtmlファイルへアクセスするとyoutubeやほかの要素が表示されません。しかし、そのページでリロードすると、問題なくすべての要素が表示されます。

このエラーはIEとsafari(iphone5c)で起こりますが、firefox,googlechromeでは起こりません。またIEで要素を検証してみるとアクセスが拒否されましたと表示されます。

どのように対処したらよいのでしょうか？
よろしくお願いします。

行動規範の内容に同意します

回答2件

それって、ローカルのHTMLファイルを読んだ場合の話ですか? サーバにアップロードして、http://でアクセスしても症状は変りませんか?

投稿2015/03/20 21:47

chokojori

総合スコア973

tieat

2015/03/21 02:01

コメントありがとうございます。現状http://でアクセスするとIEのほうは表示されるのですが、safari(iphone5c)で確認すると表示されたりされなかったりという状況です。

chokojori

2015/03/21 02:07

foo.html -> iframe.html -> youtube foo.htmlの中に<a href="iframe.html">...</a>があり、 iframe.htmlの中に<iframe width="560" height="315" src="https://www.youtube.com/embed/Qc3dRDV2cmw?rel=0" frameborder="0" allowfullscreen></iframe>のようなものがある、というイメージで良いですか? iframeの実際のコードを、見せてもらうことはできますか?

tieat

2015/03/21 04:03

こちらになります。お手数おかけします。 --section.html--(index.htmlからのリンク先ファイル) <body> <script src="https://www.youtube.com/iframe_api"></script> <script type="text/javascript"> var VIDEO_ID = 'zyCUlL3dC-w'; // 動画のID var player = null; // プレイヤー var START_SECONDS =40.8; var END_SECONDS = 47.9; // この関数はPlayer APIのロードが終わった後に呼ばれる function onYouTubeIframeAPIReady() { // プレイヤーの作成 // 第１引数は、プレイヤーとなる iframe要素が置き換わるDOM要素のID // 第２引数は、プレイヤーのオプション player = new YT.Player('player', { height: '370px', width: '640px', videoId: VIDEO_ID, disablekb:1, controls:0, playerVars: { autohide: 1, //コントローラーを自動的に隠すかどうか 0:デフォルト 1:マウスアウトしている時は消す 2:常に表示 controls:1, rel: 0, //再生終了後に関連動画を表示するかどうか 0:非表示 1:表示(デフォルト) theme:'dark', //テーマカラーの変更 lightとdark disablekb:1 }, events: { // イベントのマッピング 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } // onReadyイベント function onPlayerReady(event) { // 動画の初期設定 player.cueVideoById({videoId:VIDEO_ID, startSeconds:START_SECONDS, endSeconds:END_SECONDS, suggestedQuality:"default"}); } // onStateChangeイベント function onPlayerStateChange(event) { // イベント // YT.PlayerState.ENDED // YT.PlayerState.PLAYING // YT.PlayerState.PAUSED // YT.PlayerState.BUFFERING // YT.PlayerState.CUED if(event.data == YT.PlayerState.ENDED) { player.loadVideoById({videoId:VIDEO_ID, startSeconds:START_SECONDS, endSeconds:END_SECONDS}); } if(event.data == YT.PlayerState.BUFFERING){ $('#inputcontent').focus(); } if(event.data == YT.PlayerState.PAUSED){ $('#inputcontent').focus(); } if(event.data == YT.PlayerState.PLAYING){ $('#inputcontent').focus(); } } function position(){ var p = $("#player").offset().top + $("#player").height()/3 ; $('html,body').animate({ scrollTop: p }, 'fast'); return false; } </script> </body>

chokojori

2015/03/21 04:12

ん? これで全部ですか? プレイヤーが埋め込まれるべきdiv要素等が必要になりそうな。

chokojori

2015/03/21 04:14

ここにあるサンプルを良く読んで、確認してみてください。 https://developers.google.com/youtube/iframe_api_reference?hl=ja

tieat

2015/03/21 06:30

大変すいません。 bodyに<div id="player"></div>は記載しております...。記載ミス大変申し訳ないです。

chokojori

2015/03/21 06:35

であれば、どこでエラーになっているか、普通にデバッグするしかないかな。 HTMLの話ではなく、JavaScriptの話ですよね。