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

how to reduce html video player size in bootstrap

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

我需要这样

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

Responsive Embed classes 仅设置宽高比(使用 .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>

切勿尝试将 widthheight 属性直接添加到具有 class .embed-responsive 的元素,因为这会破坏其响应能力。不需要添加 .embed-responsive-item 除非您想要不同于 iframeembedobjectvideo.

的项目

去获取 fitvids js,只要你从宽度和高度尺寸开始,fitvids 就会使视频响应:http://fitvidsjs.com