Question

这是我的代码：

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12" align="center">
            <video autoplay muted>
                <source src="localVideoLink.mp4" type="video/mp4">
            </video>
        </div>
    </div>
</div>

问题是视频大于屏幕，并且在调整窗口大小时它不会自动缩放。

Answer 1

这里是解决方案类：embed-responsive-item

.row {
background: red;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12" >
           <div align="center" class="embed-responsive embed-responsive-16by9">
              <video autoplay loop class="embed-responsive-item">
                  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
              </video>
            </div>
        </div>
    </div>
</div>

Answer 2

您可以尝试使用

宽度：100％;

用于样式中的视频标记。

Answer 3

利用embed-responsive

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-12 embed-responsive" align="center">
      <video class="embed-responsive-item" autoplay muted>
                <source src="localVideoLink.mp4" type="video/mp4">
            </video>
    </div>
  </div>
</div>

Answer 4

你给了col-xs-12它只适用于台式机分辨率，如果你想要视频响应你必须为设备分辨率提供假设

COL-XS-12

COL-LG-12

COL-MD-12

对于每个屏幕分辨率，都有一些预定义的大小，所以使用

Bootstrap col--

Bootstrap col-xs-12大于设备宽度

4 个答案: