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

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