twitter-bootstrap 使用 twitter bootstrap，如何使嵌入式视频响应？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21787444/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using twitter bootstrap, how to make an embedded video responsive?
提问by creedjarrett
I am trying to make an embedded video responsive to window size change and compatible with mobile screens as well. Does anyone know which class to implement or how to make the video responsive? Thanks.
我正在尝试使嵌入式视频能够响应窗口大小的变化并与移动屏幕兼容。有谁知道要实现哪个类或如何使视频响应？谢谢。
回答by Jeremy Cook
The responsive embed componentwas added with the release of Bootstrap 3.2.0.
该响应嵌入组件是用加引导3.2.0的版本。
<!-- 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>
回答by bartbar
The easiest way for HTML5 video is to add class="img img-responsive" to video tag:
HTML5 视频最简单的方法是在视频标签中添加 class="img img-responsive" ：
<video controls class="img img-responsive">
回答by Shiva
Check out the "Responsive video CSS" - Source Code on github.
查看“响应式视频 CSS” - Source Code on github。
Here's a working demo on Bootply. Click Runand see it resize for different screen sizes.
这是一个working demo on Bootply. 单击Run并查看它为不同的屏幕尺寸调整大小。
<section class="row">
<div class="span6">
<div class="flex-video widescreen"><iframe src="https://www.linktoyourvideo.com/..." frameborder="0" allowfullscreen=""></iframe></div>
</div>
<div class="span6">
...
</div>
</section>
回答by brandrich
Check out the responsive-embedd.css located archive. apply the class .embed-responsive to your embed container or any of the other classes you wish.
查看位于 response-embedd.css 的存档。将 .embed-responsive 类应用到您的嵌入容器或您希望的任何其他类。
