なんじゃこりゃ
Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘https://www.youtube.com’) does not match the recipient window’s origin (‘http://sample.com’).
去年は普通に動いていたはずのサイトで、上記のエラーが出ているので調べた。
結局今の所、1)放置2)気持ち悪いけど対処する、の2択
<script src="https://www.youtube.com/iframe_api"></script>
をサイトに読み込ませればいいが、JavascriptIframeApiでも同じ領域を読み込ませるようにしているので、最終的なソースでは二重に呼び出すこととなり、気持ち悪い。。。というわけで、今の所、放置するか、気持ち悪いけど上記スクリプトを読ませるかの二択。
以下経緯
http領域でhttps領域を参照しているから出るという記事がいっぱい。でも治らん。
まず検索すると、
Youtube貼り付けでJSエラー – サイコロン
originを指定すればよいという記事が上位に出てくる、確かに、おれ、こっちから来たこういうもんだからって宣言すれば治りそう。でも治らん。このエラーが出るよ〜って言ってるヒト、大体httpsじゃなくてhttp領域でテストしてる人らなんよな。
プロトコルがちゃうからあかんなら
https://www.youtube.com/
を//www.youtube.com/
にしたらええんちゃう?という記事もたくさんあったが、治らん。
よくよくコンソールを見てみると、どうやら、iframe_api読み込んだときに追記される別のスクリプトがエラー吐いてる
<script src="https://s.ytimg.com/yts/jsbin/www-widgetapi-*****/www-widgetapi.js"></script>
エラーの内容だけじゃなくて、ちゃんとコンソールを見てみると、上記のJSが、読み込み時に吐いているエラーらしい。
そら、youtube本体のURLのプロトコル指定なしにあかんわ。こっちそれに関係なくhttpsなんやもん。
というわけでもう無理かな〜と思ったら。
このエラー、先にiframe_apiのスクリプト読み込んでおけば治るってよ。
javascript – Youtube iframe API fails to post message – Stack Overflow
https://stackoverflow.com/questions/16050024/youtube-iframe-api-fails-to-post-message
下の方のコメント意訳:「この投稿からもう三年も経ったけど、これ読んだら治るよ〜」
え〜〜え〜〜
治ったw
でも最初にかいたけど、サンプルコード通りに書くとiframe_apiを二回書くことになるので、若干気持ち悪いような。。
Youtubeさん準備のコードが吐くエラーですしと無視する
気持ち悪いと思いながらクライアント様をなだめるために二度iframe_apiを読み込む
場合によって使い分けてね★
コメントを残す