如何使用 Twitter Bootstrap 实现响应式 Youtube 嵌入 iframe? [英] How to implement a responsive Youtube embed iframe with Twitter Bootstrap?

问题描述

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

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

不幸的是，由于静态高度，在调整浏览器或移动设备的大小时，这不能很好地响应.

为 Youtube 实现此嵌入式 iframe 的更好(更动态和响应性更强)方式是什么?

解决方案

试试这个响应式视频 CSS"，它非常适合我:https://gist.github.com/2302238

<div class="span6"><div class="flex-video widescreen"><iframe src="https://www.youtube-nocookie.com/embed/..." frameborder="0" allowfullscreen=""></iframe>

<div class="span6">...

</节>

Currently I'm embedding Youtube videos with the following HAML code in a Twitter Bootstrap based site:

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

Unfortunately, this doesn't respond well when resizing the browser or on mobile devices because of the static height.

What would be a better (more dynamic and responsive) way to implement this embedded iframe for Youtube?

解决方案

Try this "Responsive video CSS", it works perfect for me: 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>

这篇关于如何使用 Twitter Bootstrap 实现响应式 Youtube 嵌入 iframe?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！