Question

目前，我正在基于Twitter Bootstrap的网站中嵌入带有以下HAML代码的Youtube视频：

.row
  .span12
    %iframe.span11{ :height => "720", :frameborder => "0", :allowfullscreen => nil, :src => v.video_url }

不幸的是，由于静态高度，在调整浏览器或移动设备大小时，这种情况不会很好。

为Youtube实现此嵌入式iframe的更好（更具动态性和响应性）的方式是什么？

Answer 1

试试这个“响应式视频CSS”，它对我来说非常适合：https://gist.github.com/2302238

<section class="row">
  <div class="span6">
    <div class="flex-video widescreen"><iframe src="https://www.youtube-nocookie.com/embed/..." frameborder="0" allowfullscreen=""></iframe></div>
  </div>
  <div class="span6">
    ...
  </div>
</section>

Answer 2

我实现了一个非常好的纯CSS解决方案。

以下是使用YouTube中生成的iframe代码在我的视图中的代码示例。

<div class="video-container">
  <iframe width="300" height="168" src="http://www.youtube.com/embed/MY__5O1i2a0" frameborder="0" allowfullscreen></iframe>
</div>

以下是另一个视图中的代码示例，其中使用了从AutoHtml gem生成的body字段，而不是使用iframe，该gem字段用于将不同类型的视频链接嵌入到网页中。如果您的模型需要将链接动态嵌入到同一网页中，那么这很好。

<div class="video-container">         
  <span style="text-align: center;"><%= @livevideo.body_html %></span>
</div>

这是CSS代码：

.video-container { 
   position: relative; /* keeps the aspect ratio */ 
   padding-bottom: 56.25%; /* fine tunes the video positioning */ 
   padding-top: 60px; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

以下是YouTube视频，详细解释了代码的工作原理，并提供了一两篇博客文章。

http://www.youtube.com/watch?v=PL_R3zEjqEc

Answer 3

Bootstrap 3.2.0附带了一些改进和大量的bug修复。用于构建具有响应式设计的网站的框架，Bootstrap缺少对最新版本中添加的响应和元素功能的支持。

响应式YouTube 16：9视频的HTML，根据显示的页面宽度调整其大小，如下所示：

On your container(maybe DIV) add class="embed-responsive embed-responsive-16by9"

Answer 4

这可能最适合使用jQuery：http://www.seanmccambridge.com/tubular/或http://okfoc.us/okvideo/

Answer 5

为了自动化@Bart's answer，我创建了一个简单的Javascript剪辑，自动包裹iframe

中的<div class="flex-video">个元素

$(document).ready(function() {
  $('iframe').each(function() {
    $(this).wrap('<div class="flex-video"></div>');
  });
});

Answer 6

如果使用bootstrap，下面的方法毫无疑问是实现响应式嵌入的最简单方法：

<!-- 16:9 aspect ratio -->
 <div class="embed-responsive embed-responsive-16by9">
   <iframe class="embed-responsive-item" src="..."></iframe>
 </div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

可以在此处找到文档：http://getbootstrap.com/components/#responsive-embed。

如何使用Twitter Bootstrap实现响应式Youtube嵌入iframe？

6 个答案: