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

【问题标题】：How to implement a responsive Youtube embed iframe with Twitter Bootstrap?如何使用 Twitter Bootstrap 实现响应式 Youtube 嵌入 iframe？
【发布时间】：2012-08-23 09:43:26
【问题描述】：

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

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

很遗憾，由于静态高度，这在调整浏览器大小或在移动设备上时响应不佳。

为 Youtube 实现这个嵌入式 iframe 有什么更好（更动态和响应更快）的方法？

【问题讨论】：

标签： ruby-on-rails-3 twitter-bootstrap youtube-api responsive-design

【解决方案1】：

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

【讨论】：

【解决方案2】：

试试这个“响应式视频 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>

【讨论】：

谢谢巴特！在响应式 WP 博客中像魅力一样工作。
因为这个脚本不起作用，但是这个 jQuery 插件为我完成了这项工作：github.com/marclarr/FitVids.js
伙计，这很好用。我希望看到它默认内置在引导程序中。
我添加了一个答案，它提供了一个简单的 Javascript sn-p，它会自动添加@Bart 声明的代码。见stackoverflow.com/a/20585329/955619

【解决方案3】：

我实现了一个效果很好的纯 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 视频，它详细解释了代码的工作原理，并提供一两篇博文供您查看。

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

【讨论】：

虽然理论上这可以回答这个问题，it would be preferable 在这里包含答案的基本部分，并提供链接以供参考。

【解决方案4】：

为了自动化 @Bart's answer，我创建了一个简单的 Javascript 片段，它自动将 iframe 元素包装在 <div class="flex-video"> 中

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

【讨论】：

【解决方案5】：

Bootstrap 3.2.0 包含多项改进和大量错误修复。用于构建具有响应式设计的网站的框架，Bootstrap 缺少对在此最新版本中添加的响应式和元素功能的支持。

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

在您的容器（可能是 DIV）上添加 class="embed-responsive embed-responsive-16by9"

【讨论】：

【解决方案6】：

如果使用引导程序，下面的方法无疑是实现响应式嵌入的最简单方法：

<!-- 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。

【讨论】：