目前我在一个基于 Twitter Bootstrap 的网站中使用以下 HAML 代码嵌入 YouTube 视频：
.row
.span12
%iframe.span11{ :height => "720", :frameborder => "0", :allowfullscreen => nil, :src => v.video_url }
很遗憾，由于高度固定，当浏览器调整大小或在移动设备上进行操作时，这种方法的响应效果并不理想。
有什么更好的（更具动态性和响应性）实现嵌入Youtube iframe的方式吗？
尝试使用这个“响应式视频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>
我实现了一个纯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>
这里是另一个视图中的代码示例，它不使用iframe而是使用从AutoHtml gem生成的body字段，该字段可用于将不同类型的视频链接嵌入网页。如果您有一个模型需要将链接动态嵌入同一网页中，则这很有用。
<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视频，详细解释了代码的工作原理，并提供了一两篇博客文章进行查看。
Bootstrap 3.2.0有许多改进和大量的错误修复。Bootstrap是用于构建具有响应式设计的网站的框架，但它缺少对响应式
一个响应式YouTube 16:9视频的HTML代码，根据所显示页面的宽度自动调整其大小，如下所示：
在您的容器（可能是DIV）上添加class="embed-responsive embed-responsive-16by9"
<!-- 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。
为了自动化@Bart的回答，我创建了一个简单的Javascript片段，它会自动将iframe元素包装在<div class="flex-video">中。
$(document).ready(function() {
$('iframe').each(function() {
$(this).wrap('<div class="flex-video"></div>');
});
});