嵌入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未捕获的SecurityError：阻止了源为“ https://www.youtube.com ”的框架访问源为“ http://mywebsite.com ” 的框架。请求访问的帧的协议为“ https”，正在访问的帧的协议为“ http”。协议必须匹配。

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

更新：

即使在JS小提琴中仍然会收到错误；

Answer 1

您需要在 src url 中添加一个origin 参数，然后您可以http在 iframe 中使用协议：

作为额外的安全措施，您还应该在 URL 中包含 origin 参数，指定 URL 方案（http:// 或 https://）和主机页面的完整域作为参数值。虽然 origin 是可选的，但包含它可以防止恶意第三方 JavaScript 注入您的页面并劫持 YouTube 播放器的控制。

例子：

<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>