twitter-bootstrap 如何在引导程序中减少 html 视频播放器的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28124214/
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
how to reduce html video player size in bootstrap
提问by Thamaraiselvam
I have used bootstrap to have responsive video , but problem is I have only 2 sizes
我已经使用引导程序来制作响应式视频，但问题是我只有 2 个尺寸
class="embed-responsive embed-responsive-16by9"
and
和
class="embed-responsive embed-responsive-4by3"
these are really huge. how can i change width and height manually , if i try with this
这些真的很大。如果我尝试这样做，我如何手动更改宽度和高度
style="width:400px ; height:400px"
style="width:400px ; height:400px"
the video is re sized but the responsive does not work. please help me .
视频已重新调整大小，但响应不起作用。请帮我 。
this is my code
这是我的代码
<div align="center" class="embed-responsive embed-responsive-16by9" style="width:400px;height:400px">
<video class="embed-responsive-item" controls>
<source src="<?php echo str_replace("../../../../","",$subvalue->video);?>" type="video/mp4">
</video>
</div>
i need like this
我需要这样
but after adding style width and height i get like this
但是在添加样式宽度和高度后，我得到了这样的
回答by ckuijjer
The Responsive Embedclasses only set the aspect-ratio (use .embed-responsive-16by9for a 16x9 video and .embed-responsive-4by3for a 4x3 one). They'll take up 100% of the width of their containing block.
的响应嵌入类只设定纵横比（使用.embed-responsive-16by9了16×9的视频和.embed-responsive-4by3用于4×3的一个）。它们将占据其包含块宽度的 100%。
In order to give them a width, you'll only need to add a container, for example .sizer, that has a widthset.
为了给它们一个宽度，你只需要添加一个容器，例如.sizer，它有一个width集合。
.sizer {
width: 300px;
}<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="sizer">
<div class="embed-responsive embed-responsive-16by9">
<video src="http://techslides.com/demos/sample-videos/small.mp4" autoplay controls></video>
</div>
</div>Another option is to add it inside a Bootstrap grid like this
另一种选择是像这样将它添加到 Bootstrap 网格中
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="embed-responsive embed-responsive-16by9">
<video src="http://techslides.com/demos/sample-videos/small.mp4" autoplay controls></video>
</div>
</div>
</div>
</div>Never try to add the widthand heightproperties directly to the element with the class .embed-responsiveas that will break its responsiveness. It is not needed to add .embed-responsive-itemunless you want an item different from iframe, embed, objector video.
切勿尝试将width和height属性直接添加到具有类的元素，.embed-responsive因为这会破坏其响应能力。.embed-responsive-item除非您想要不同于、或的项目iframe，否则不需要添加。embedobjectvideo
回答by Nathaniel Flick
Go grab fitvids js and as long as you start with width and height dimensions fitvids will make that video responsive: http://fitvidsjs.com
去抓住 fitvids js，只要你从宽度和高度尺寸开始 fitvids 将使该视频响应：http://fitvidsjs.com
