css - 如何在两个 Bootstrap 列设置中缩小或适合移动设备上的视频？

Question

我在 Bootstrap 4 中有两列，一列有视频，另一列有文本或其他类型的内容:

#video-meta-content {
  width: 100%;
  height: 500px;
  margin: 0;
  padding: 0;
  border: 3px solid grey;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div id="vidcontainer" class="col-sm-8">
      <video controls> 	
        <p>Your browser does not support video.</p>
     		<source src="http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_60fps_normal.mp4"> 
      </video>
    </div>
    <div class="col-sm-4 ">
      <div style="" class="row" id="vid-content-row">
        <div class="col-sm-12" id="video-meta-content">
          few paragraoh of text here
        </div>
      </div>
    </div>
  </div>
</div>

视频大小为 720 x 406。它在台式机和横向平板电脑上正确显示，但在手机上视频显示在 720 像素宽的框架中，由于屏幕小，部分框架被隐藏。如果屏幕太小无法在一行中容纳两列，则某些内容列也会位于视频的顶部，而不是堆叠在视频列的下方。

我希望视频缩小以适应屏幕大小。

Answer 1

让视频适应可用宽度的关键是添加以下几行css:

video {
    max-width: 100%;
}

这会将视频限制在其容器的宽度内，同时高度会自动调整以保持纵横比。视频永远不会大于它的实际大小(在下面的示例中为 1920px)，因此如果 #vidcontainer 的宽度小于视频，则视频将自身限制为该大小宽度，如果 #vidcontainer 更大，则视频将是其通常大小。

您可以通过将下面的 Stack Snippet 放入 Full Page 并更改浏览器窗口的宽度来查看。

#video-meta-content {
  width: 100%;
  height: 500px;
  margin:0;
  padding:0;
  border: 3px solid grey;
}
video {
  max-width: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div id="vidcontainer" class="col-sm-8">
      <video controls>    
        <p>Your browser does not support video.</p>
        <source src="http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_60fps_normal.mp4">     
      </video>
    </div>
    <div class="col-sm-4 ">
      <div style="" class="row" id="vid-content-row">
        <div class="col-sm-12" id="video-meta-content">
          few paragraoh of text here
        </div>
      </div>
    </div>
  </div>
</div>