html - Bootstrap响应式YouTube嵌入，不允许跨源框架

Question

尝试嵌入视频后，该网站将不会显示该视频。

使用以下简单的HTML代码:

   <div class="embed-responsive embed-responsive-16by9">  
      <iframe class="embed-responsive-item" src="https://www.youtube.com/watch?v=n01ogXL-q9I"></iframe>
    </div>

出现控制台错误:

Load denied by X-Frame-Options: https://www.youtube.com/watch?v=n01ogXL-q9I does not permit cross-origin framing.

有一个简单的安全修复程序吗？我认为这在某种程度上与安全性有关，可以防止点击劫持攻击？如果Youtube嵌入对用户可见，我希望使用它。

Answer 1

无法显示视频的简单原因是，在其他任何网站上使用该视频之前，都需要先将其嵌入。

您的代码:

<div class="embed-responsive embed-responsive-16by9">  
  <iframe class="embed-responsive-item" src="https://www.youtube.com/watch?v=n01ogXL-q9I"></iframe>

您需要始终在 /watch?v=之后用 /embed/替换 www.youtube.com，如下所示:

<div class="embed-responsive embed-responsive-16by9">
     <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/n01ogXL-q9I"></iframe>
</div>