嵌入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中添加一个起源参数，然后可以在iframe中使用http协议：

作为额外的安全措施，您还应该包括URL的源参数，指定URL方案(http://或https://)和主机页的完整域作为参数值)。虽然来源是可选的，包括它可以防止恶意的第三方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>

Answer 2

你必须使用：

src="https://www.youtube.com/embed/videoID"

对我起作用了。