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

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

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

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

YouTube API

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

4回答

12359閲覧

YouTube APIで動画を埋め込んだ時にエラーが出る

groco

総合スコア20

YouTube

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

YouTube API

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

3クリップ

投稿2018/03/31 02:12

編集2018/03/31 02:35

YouTube APIを使用して動画を埋め込んだ時にコンソールに下記のようなエラーが出てしまいます。

** エラーメッセージ1 **

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('http://localhost').

** エラーメッセージ2 **

Error parsing header X-XSS-Protection: 1; mode=block; report=https://www.google.com/appserve/security-bugs/log/youtube: insecure reporting URL for secure page at character position 22. The default protections will be applied.

調べてみると下記サイトを見つけたのでできる範囲で試してみたのですが、やり方が違うのか解決できませんでした。

** 参考サイト **
https://stackoverflow.com/questions/27573017/failed-to-execute-postmessage-on-domwindow-https-www-youtube-com-http

エラーをなくすためにはどのような対策を入れる必要があるでしょうか?

現在使用している埋め込み用のJavascriptは下記です。

Javascript

1var youtube_ID = $('#sample').data("video"); 2 3var tag = document.createElement('script'); 4tag.src = "https://www.youtube.com/iframe_api"; 5var firstScriptTag = document.getElementsByTagName('script')[0]; 6firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 7 8var playerReady = false; 9function onPlayerReady(event) { 10 playerReady = true; 11} 12 13function onYouTubeIframeAPIReady() { 14 ytPlayer = new YT.Player ('sample', { 15 width: 640, 16 height: 390, 17 videoId: youtube_ID, 18 playerVars: { 19 rel: 0, 20 autoplay: 0, 21 showinfo: 0, 22 }, 23 events: { 24 'onReady': onPlayerReady 25 } 26 }); 27} 28 29$(function() { 30 $('.yt_btn').click(function() { 31 if(playerReady) { 32 ytPlayer.playVideo(); 33 $(this).addClass('yt_play'); 34 } 35 }); 36});

HTML

1<div id="sample01" class="ytBtn"> 2 <div id="sample"></div> 3</div>

また、このエラーはYouTube Player API リファレンスのページやYouTube APIの埋め込み方の紹介ページにもでていることがあるようですが、頻発するものなのでしょうか?

ご教示いただけますと幸いです。
何卒よろしくお願いいたします。

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

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

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

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

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

Lhankor_Mhy

2018/03/31 02:55

スタックオーバーフローに書かれている、SSLとnonSSLの混在が原因、という指摘は試してみましたか?
groco

2018/03/31 06:28

すみません、返信が遅くなってしまいました。SSLとnonSSLの混在というのを見かけたので「tag.src = "https://www.youtube.com/iframe_api";」を「tag.src = "http://www.youtube.com/iframe_api";」にしてみたりしてみましたがエラーは消えませんでした。検証方法が間違えていますかね?
Lhankor_Mhy

2018/03/31 10:29

あ、そうか、必要ないんですね。じゃあ、関係ないのかなあ……?
groco

2018/03/31 11:03 編集

なかなかAPIの扱いは難しいものなのですね・・・。リファレンスのページや、実際にサイト内でYouTubeを使用しているサイトをいくつか探してみたのですが、特に「エラーメッセージ2 」の方は今見た限りだとYouTubeを再生するとどのサイトでもchromeでは表示されてしまうようでした。再生ができるのであればこれらのエラーはあまり気にしなくても良いものなのでしょうか・・・?
Lhankor_Mhy

2018/03/31 11:09

ごめんなさい、ちょっと私には荷が重い感じです。
groco

2018/03/31 12:00

すみません、何度も返答くださりありがとうございます。
guest

回答4

0

僕もエラーメッセージ1で、困ってstackoverflowなど調べて試したのですが
結果どうにもなりませんでした。

YouTube公式の「YouTube プレーヤーのデモ」ページでもエラーが出るので
もはやどうしようもないのかなと諦めました。
iframe_apiが改修されてエラーが出なくなるの待ちかなと思います。

イメージ説明

投稿2018/06/24 09:48

kakeru33

総合スコア16

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

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

groco

2020/12/11 04:35

とても今更ではありますが・・・ご回答、ありがとうございました! YouTube公式もデモページでも出ているのであれば確かにどうしようもないですね。。。 今、公式のデモページを見てみましたが、まだエラーが出てました。 致命的という内容でもないですし、エラーが出てなくなるのを待ってみます。
guest

0

ベストアンサー

head内に

<script src="https://www.youtube.com/iframe_api"></script>

を挿入するとエラー自体は解消されました。

ただし、iframe_api を重複してロードしているような状態なので、気持ち悪い感じがしますが。。

参考:
https://hirokonakahara.com/blog/?p=3974

投稿2019/10/10 01:15

msa

総合スコア27

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

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

groco

2020/12/11 04:44

とても今更ではありますが・・・ご回答、ありがとうございました! 確かに iframe_api を重複してロードしてしまうのは気持ち悪いような、居心地が悪いような気もしますが、こういう対応策があるのですね! 今回は一旦、Youtube公式でもエラー出てるし・・・ということで、対策しない方向となりましたが、解決方法をご提示いただきありがとうございました。 次回同じことが起きて対策が必要となった際にはこちらの方法で対策してみたいと思います。
guest

0

五月雨で申し訳ございません!

現在の現象について何点か質問があります。

  1. youtubeは正常に再生されますか?
  2. コンソールエラーが出るブラウザは何ですか?
  3. 公式Documentsは読みましたか?
  4. ローカル開発環境なのかサーバー上でのエラーなのか?

沢山質問してしまいましたが、答えられる範囲で構いません。
よろしくお願いします。

投稿2018/04/01 00:22

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

groco

2018/04/15 13:46

せっかくご回答くださっていたのに返信ができておらず大変失礼いたしました。 不要カンマの件、ご指摘くださりありがとうございます。 削除しました。 ただ、エラーは変わらず出ていました。 ご質問いただいていた件について回答させていただきます。 > 1. youtubeは正常に再生されますか? はい、youtubeは正常に再生されています。 > 2. コンソールエラーが出るブラウザは何ですか? chromeで出ています。 エラーメッセージ1 はfirefoxでも出ていました。 > 3. 公式Documentsは読みましたか? すみません、ざっとは読んだのですがあまり読み込めていないです。 > 4. ローカル開発環境なのかサーバー上でのエラーなのか? サーバー上でのエラーです。 お時間ができましたらご回答いただけますと幸いです。 何卒よろしくお願いいたします。
guest

0

エラー解決とは関係ないとは思いますが、

lang=javascript

1playerVars: { 2 rel: 0, 3 autoplay: 0, 4 showinfo: 0, 5},

showinfoのところはカンマ不要なので削除しときましょう。

投稿2018/04/01 00:14

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問