bootstrap自动调整屏幕大小的视频大小

Question

我正在尝试使用Bootstrap和Foundation来为node.js表示路由的前端工作.我想知道Bootstrap是否有任何方法可以获得与Foundation的Flex Video功能相同的功能(据我所知,它是基于屏幕尺寸的自动调整大小)？

编辑:关于Peter Wooster的答案,如果有一个可以在没有框架的情况下轻松完成的解决方案,为什么人们会对Flex-Video做出如此大的影响呢？

Answer 1

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

无可比拟的例子只是为了避免愚蠢的烦恼SO官僚抱怨"仅链接答案":

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

Answer 2

您不需要框架来制作响应式视频，因此如果未包含它，您可以添加它。

诀窍是将视频包装在 div 中，width:100%; height:0; padding-bottom:66%或者使用您希望视频具有的任何宽高比。将视频的宽度和高度设置为 100%。该 div 将正确缩放并保留其纵横比，视频将填充它。

编辑：这个技巧并不新鲜，只是不太为人所知，这里有一篇 2009 年的文章对其进行了描述： http: //alistapart.com/article/creating-intrinsic-ratios-for-video。幸运的是，不再需要 IE5-6 的拼凑。