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

Posted

技术标签:

【中文标题】如何使用 Twitter Bootstrap 实现响应式 Youtube 嵌入 iframe?【英文标题】:How to implement a responsive Youtube embed iframe with Twitter Bootstrap? 【发布时间】: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 有什么更好(更动态和响应更快)的方法?

【问题讨论】:

【参考方案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 声明的代码。见***.com/a/20585329/955619【参考方案3】:

我实现了一个效果很好的纯 CSS 解决方案。

这是我认为使用 YouTube 中生成的 iframe 代码的代码示例。

<div class="video-container">
  <iframe   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 元素包装在 &lt;div class="flex-video"&gt;

$(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。

【讨论】:

以上是关于如何使用 Twitter Bootstrap 实现响应式 Youtube 嵌入 iframe?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 Twitter 引导响应更改导航栏折叠阈值?

100% 宽度 Twitter Bootstrap 3 模板

Twitter Bootstrap - 如何水平或垂直居中元素

Twitter Bootstrap 模态表单:如何拖放?

如何创建可打印的 Twitter-Bootstrap 页面

如何在Twitter Bootstrap工具提示上启用淡入淡出效果?