嵌入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：阻止具有原点的帧   ＆＃34; https://www.youtube.com＆＃34;从访问原始框架   ＆＃34; http://mywebsite.com＆＃34 ;.请求访问的帧具有协议   ＆＃34; https＆＃34;，被访问的帧具有＆＃34; http＆＃34;的协议。协议   必须匹配。

我尝试更改＆＃34; src＆＃34;在iframe中 http 而不是 https 似乎可行，但我不知道是否可以这样做。有什么反馈吗？

更新

即使在JS小提琴中仍然会出现错误;

Answer 1

您需要在src网址中添加origin parameter，然后才能在iframe中使用http协议：

  

作为额外的安全措施，您还应该在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>

Answer 2

您必须使用：

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

对我有用。