如何在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

Responsive Embed类仅设置宽高比( 16x9视频使用.embed-responsive-16by9，4x3视频使用.embed-responsive-4by3 )。它们将占据其包含块宽度的100%。

为了给它们一个宽度，您只需要添加一个设置了width的容器，例如.sizer。

​

.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类的元素中，因为这会破坏它的响应性。除非您想要不同于iframe、embed、object或video的项，否则不需要添加.embed-responsive-item。

Answer 2

去抓取fitvids js，只要你从宽度和高度开始，fitvids就会让视频响应式的：http://fitvidsjs.com