29

目前，我正在基于 Twitter Bootstrap 的站点中嵌入具有以下 HAML 代码的 Youtube 视频：

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

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

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

4

6 回答 6

78

试试这个“响应式视频 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>
于 2012-09-02T11:35:24.687 回答
12

我实现了一个非常好的纯 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

于 2013-05-25T21:02:41.700 回答
3

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

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

在您的容器（可能是 DIV）上添加 class="embed-responsive embed-responsive-16by9"
于 2014-09-11T15:18:27.477 回答
1

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

于 2012-08-28T21:01:48.837 回答
1

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

$(document).ready(function() {
  $('iframe').each(function() {
    $(this).wrap('<div class="flex-video"></div>');
  });
});
于 2013-12-14T16:03:12.707 回答
1

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

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

于 2016-08-03T11:54:45.330 回答