自适应屏幕大小的Bootstrap视频调整

Question

我正在考虑在使用node.js express路由的前端工作中选择Bootstrap或Foundation。我想知道Bootstrap是否有类似Foundation的Flex Video功能（根据屏幕大小自动调整大小）的等效功能？

编辑： 关于Peter Wooster的答案，如果没有框架就可以轻松解决问题，那么为什么人们还要如此大费周折地使用Flex-Video呢？

- Bren

---

这是一个很好的卖点，而且不是很明显。我刚刚在http://foundation.zurb.com/docs/components/flex_video.html上检查了他们的演示，他们使用了我在答案中提供的相同技巧。 - Peter Wooster

Answer 1

Bootstrap具有响应式嵌入功能：http://getbootstrap.com/components/#responsive-embed

这只是一个没有实际意义的例子，仅为了避免SO（StackOverflow）官员投诉“仅链接答案”的麻烦。

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

- cvrebert

Answer 2

您不需要框架来实现响应式视频，如果未包含此功能，则可以添加。技巧是将视频放入带有width:100%; height:0; padding-bottom:66%或所需宽高比的div中。将视频的宽度和高度设置为100%。该div将适当缩放并保留其宽高比，视频将填充它。

编辑：这个技巧并不新，只是不太知名。以下是2009年的一篇文章介绍它：http://alistapart.com/article/creating-intrinsic-ratios-for-video。幸运的是，不再需要IE5-6修补程序。

- Peter Wooster

---

是的，这正是我所怀疑的。你有什么想法，为什么人们会如此重视Flex-Video呢？对于考虑使用Foundation的人来说，这不是一个很大的卖点吗？如果你搜索框架之间的差异，它会出现在一些顶级的谷歌搜索结果中。谢谢！ - Bren

这个技巧并不是很出名。谁会想到垂直填充会相对于宽度进行缩放呢？ - Peter Wooster