質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
YouTube

YouTubeとはユーザーがビデオをアップロード・共有・閲覧できるビデオ共有ウェブサイトです。

YouTube API

YouTube APIはYouTubeのビデオコンテンツと機能性をウェブサイト、アプリケーション、デバイスに統合することを可能にします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

9497閲覧

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

tieat

総合スコア16

YouTube

YouTubeとはユーザーがビデオをアップロード・共有・閲覧できるビデオ共有ウェブサイトです。

YouTube API

YouTube APIはYouTubeのビデオコンテンツと機能性をウェブサイト、アプリケーション、デバイスに統合することを可能にします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2015/03/20 19:40

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

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

投稿2015/03/20 21:47

chokojori

総合スコア971

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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() { // プレイヤーの作成 // 第1引数は、プレイヤーとなる iframe要素が置き換わるDOM要素のID // 第2引数は、プレイヤーのオプション 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要素等が必要になりそうな。
tieat

2015/03/21 06:30

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

2015/03/21 06:35

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

0

自己解決

ロリポップのサーバーにあげた直後だったのが原因だったのかもしれません。時間の経過を待ち解決しました。chokojoriさんお手数おかけしました。ありがとうございました。

投稿2015/03/24 13:23

tieat

総合スコア16

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問