html - 响应式嵌入不会显示

Question

我正在使用 Bootstrap v 3.3 构建我的网页，我想制作一个视频。我已将代码从 www.getbootstrap.com 复制到我的 .html 文件中，但它不显示视频，它只是在网页上腾出了很多可用空间。

HTML

 <div class="row-fluid">  
      <div class="col-sm-3">
         <h3>Co to vlastně je?</h3>
      </div>

      <div class="col-sm-9">
         <p class="odstavec"> Webové stránky nás v životě doprovází již od roku 1991, kdy zaměstnanec Evropské organizace pro jaderný výzkum sir Tim Berners-Lee vypustil na web vůbec první internetovou stránku. Jejím cílem bylo popsat princip WWW a podpořit rozvoj nové technologie. </p> 
         <p class="odstavec"> Od té doby se technologie posunula výrazně dopředu. Webové stránky jsou v současnosti pro většinu lidí nezbytnou součástí v životě. S nástupem chytrých telefonů, tabletů a jiných zařízení však přišla na řadu další důležitá otázka. Jak zařídit, aby byly webové stránky optimalizovány pro výše zmíněné zařízení s různou velikostí displeje, na kterých se mají zobrazit. </p>
         <p class="odstavec"> S termínem „responzivní webový design“ přišel poprvé v roce 2010 Ethan Marcotte. Responzivním designem nazval takový návrh webové stránky, jenž bude optimalizován pro všechny druhy zařízení. Abych to shrnul, responzivní stránka je tedy taková stránka, která své zobrazení přizpůsobí velikosti zobrazovací plochy zařízení, z kterého na web uživatel přistupuje. </p>
      </div> 

      <div class="embed-responsive embed-responsive-4by3">
          <iframe class="embed-responsive-item" src="https://www.youtube.com/watch?v=wjsw--Oad6M"></iframe>
      </div>

    </div>  
   </div>     
</div> <!-- End row-fluid--> 

Answer 1

发生的原因是 Youtube 方面的限制。 Google 及其所有产品都做同样的事情。

他们在通过 iframes 请求时限制对其内容的访问.如果您在运行页面时检查控制台，您可能会看到如下内容:

Refused to display 'https://www.youtube.com/watch?v=wjsw--Oad6M' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

这些限制通常是出于安全原因或阻止人们将其内容嵌入网站。他们限制了被调用的 url，如果在 iframe 中使用，它只能从原始域调用。 .您可以在此处查看有关它的更多信息:

https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options

要在页面上嵌入您的视频，您应该使用 Youtube 在视频页面上提供的正确嵌入代码。所以在你的情况下:

<iframe width="420" height="315" src="https://www.youtube.com/embed/wjsw--Oad6M" frameborder="0" allowfullscreen></iframe>

这里的例子:http://jsfiddle.net/zxjmw5j4/1/