javascript - 嵌入 Youtube 视频 http/https 匹配错误

Question

我在我的网站上嵌入了一个 Youtube 视频，如下所示:

<iframe class="frame-for-top" width="300" height="200" src="https://www.youtube.com/embed/nb9GMm7QtlM" frameborder="0" allowfullscreen></iframe>

现在，当我打开我的控制台时，我会收到一条关于我所有嵌入式 YouTube 视频的错误消息:

:1 Uncaught SecurityError: Blocked a frame with origin "https://www.youtube.com" from accessing a frame with origin "http://mywebsite.com". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.

我尝试将 iframe 中的“src”更改为 http 而不是 https 似乎可行，但我不知道是否可以这样做。有什么反馈吗？

更新:

即使在 JS fiddle 中仍然会出现错误；

Answer 1

您需要添加一个 origin parameter到您的 src url，然后您可以在您的 iframe 中使用 http 协议(protocol):

As an extra security measure, you should also include the origin parameter to the URL, specifying the URL scheme (http:// or https://) and full domain of your host page as the parameter value. While origin is optional, including it protects against malicious third-party JavaScript being injected into your page and hijacking control of your YouTube player.

例子:

<iframe id="player" type="text/html" width="640" height="390"
  src="http://www.youtube.com/watch?v=nb9GMm7QtlM?origin=http://mywebsite.com"
  frameborder="0"></iframe>