如何实现与Twitter的引导一个负责任的Youtube嵌入的iframe？(How to impl

目前我嵌入YouTube视频，在一个基于Twitter的引导网站下面的代码HAML：

.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>

下面是代码在代替使用IFRAME我使用来自AutoHtml宝石，其用于嵌入不同类型的视频链接到网页所产生的主体字段另一个视图的示例。如果你有其中的链接需要动态嵌入到同一个网页的模式，这是很好的。

<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:

引导3.2.0自带了几个改进和大量的bug修复。一种用于网站建设一个负责任的设计框架，引导是为响应缺少支持，和元素，在这个最新版本的附加功能。

该调整基于它显示在看起来像这样的页面宽度的大小9视频：为响应YouTube的16 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:

只是为了使自动化@巴特的回答，我创建了一个简单的Javascript剪断，自动包装iframe中的元素<div class="flex-video">

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

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

文章来源: How to implement a responsive Youtube embed iframe with Twitter Bootstrap?