YouTube Iframe API 无法将消息发布到 http。收件人有来源 https

Question

使用 YouTube Iframe API，我在 Safari 9.1, OS X Yosemite 中收到以下错误。

无法向http://www.youtube.com发布消息。收件人有来源https://www.youtube.com

该页面可以在其他浏览器（例如 Firefox、Chrome 等）中运行。此外，事实证明它仅在一台特定机器上损坏。它可以在另一台运行相同操作系统和浏览器的机器上运行。

我不知道从哪里开始调试这个。

生成的 iframe HTML 代码如下所示：

<iframe id="myVideo" frameborder="0" allowfullscreen="1" title="YouTube video player" width="200" height="200" src="http://www.youtube.com/embed/?html5=1&amp;showinfo=0&amp;autoplay=0&amp;rel=0&amp;controls=1&amp;playsinline=1&amp;enablejsapi=1&amp;origin=http%3A%2F%2Fwww.example.com"></iframe>

JavaScript 代码是这样的：

...
vid_frame = new YT.Player(id, {
    height: '200',
    width: '200',
    videoId: id,
    playerVars: {
       html5: 1,
       showinfo: showVideoInfo,
       autoplay: 0,
       rel: showRelatedVideos,
       controls: showPlayerControls,
       playsinline: 1
    },
    events: {
        onReady: onPlayerReady
    }
});

我觉得有一个浏览器设置阻止了网站和 YouTube API 之间的通信，但错误只是说https://www.youtube.com正在尝试向http://www.youtube.com（而不是https）发送某些内容。

我尝试手动将其更改http为https（在 iframe 网址中），但随后收到警告说：

Untrusted origin: http://example.com

（因为主网站是服务器http）

如何解决这个问题？

我确实看到了这个相关问题：无法向 http://www.youtube.com 发布消息。收件人有来源 https://www.youtube.com

从哪里开始调试？

Answer 1

不要使用<script src='path/to/iframe_api'></script>标签加载 YouTube Iframe API ，而是使用他们在文档中推荐的方式：

此代码异步加载 IFrame Player API 代码。

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

实际上，script从 JavaScript 端创建标记，不要直接将它放在 HTML 中（例如<script src="..."></script>）。