如何在bootstrap中减少html视频播放器的大小

Question

我使用bootstrap来提供响应式视频,但问题是我只有2种尺寸

class="embed-responsive embed-responsive-16by9"

和

class="embed-responsive embed-responsive-4by3"

这些真的很大.如果我尝试这个,我怎么能手动改变宽度和高度

style="width:400px ; height:400px"

视频重新调整大小但响应不起作用.请帮我 .

这是我的代码

  <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>

我需要这样的

但是在添加样式宽度和高度后,我会这样

Answer 1

的响应嵌入类只设定纵横比(使用.embed-responsive-16by9了16×9的视频和.embed-responsive-4by3用于4×3的一个).它们将占据其包含块的宽度的100%.

为了给它们一个宽度,你只需要添加一个容器,例如.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>

另一种选择是将它添加到这样的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>

永远不要尝试将width和height属性直接添加到具有类的元素,.embed-responsive因为这将破坏其响应性..embed-responsive-item除非您想要一个与,或相关的项目iframe,否则不需要添加.embedobjectvideo