如何在引导程序中减小 html 视频播放器的大小答案

【问题标题】：how to reduce html video player size in bootstrap如何在引导程序中减小 html 视频播放器的大小
【发布时间】：2015-01-26 04:19:12
【问题描述】：

我使用 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>

我需要这样的

但是在添加样式宽度和高度后，我得到了这样的结果

【问题讨论】：

标签： css html twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

Responsive Embed 类只设置纵横比（.embed-responsive-16by9 用于 16x9 视频，.embed-responsive-4by3 用于 4x3 视频）。它们将占据其包含块宽度的 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、embed、object 或video 不同的项目。

【讨论】：

您也可以使用常规引导网格围绕它，例如使用.col-xs-6，或者用具有百分比宽度的容器 div 围绕它。您究竟在寻找什么样的响应能力？

【解决方案2】：

去抓取 fitvids js，只要您从宽度和高度尺寸开始，fitvids 就会使该视频具有响应性：http://fitvidsjs.com

【讨论】：