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方面的限制。谷歌及其所有产品都做同样的事情。

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

拒绝在a中显示“https://www.youtube.com/watch?v=wjsw--Oad6M” 因为它将'X-Frame-Options'设置为'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/

Answer 2

首先，你有几个额外的</div>，删除它们。并尝试使用另一个视频，我已经尝试了

＆＃13;

<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/jDRTghGZ7XU"></iframe>
</div>

＆＃13;

它对我来说很好。

响应式嵌入不会显示

2 个答案: