Bootstrap 4双列布局下如何在移动设备上适配视频？

看你目前的代码，核心问题出在#video-meta-content设置了固定的height: 500px——这会让视频容器在移动端没法自适应屏幕高度，再加上视频本身没做响应式处理，自然就出现适配卡顿的情况。下面给你几个实用的解决方案：

方案一：用宽高比容器维持视频比例，自适应屏幕 #

把固定高度去掉，改用基于padding的宽高比容器包裹视频，这样视频能在任何屏幕尺寸下保持正确的比例，同时自动填满父容器宽度：

/* 替换原有的#video-meta-content样式 */
#video-meta-content {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 3px solid grey;
  position: relative;
  height: 0;
  /* 16:9视频比例用56.25%，如果是4:3就用75%，按需调整 */
  padding-top: 56.25%;
}

#video-meta-content video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

调整后的HTML结构：

<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">
      <div id="video-meta-content">
        <video controls>
          <p>Your browser does not support video.</p>
          <!-- 记得补充视频源，比如 <source src="your-video.mp4" type="video/mp4"> -->
        </video>
      </div>
    </div>
    <!-- 你的右侧内容列 -->
    <div class="col-sm-4">
      <!-- 文本或其他内容 -->
    </div>
  </div>
</div>

方案二：利用Bootstrap内置类快速实现响应式 #

如果你不需要复杂的比例控制，直接给视频添加Bootstrap的w-100类（宽度100%），同时去掉容器的固定高度，就能让视频自动适配父容器：

<div id="vidcontainer" class="col-sm-8">
  <video controls class="w-100">
    <p>Your browser does not support video.</p>
  </video>
</div>

Bootstrap的col-sm-8默认会在屏幕小于576px时自动变成100%宽度，配合w-100的视频，移动端就能自动全屏显示视频了。

方案三：针对移动端单独定制样式 #

如果需要在桌面端保留固定高度，仅在移动端适配，可以用Bootstrap的媒体查询断点做针对性调整：

/* 桌面端默认样式 */
#video-meta-content {
  width: 100%;
  height: 500px;
  margin: 0;
  padding: 0;
  border: 3px solid grey;
}

/* 针对屏幕小于576px的移动端 */
@media (max-width: 575.98px) {
  #video-meta-content {
    height: auto; /* 移除固定高度 */
  }
  #video-meta-content video {
    width: 100%;
    height: auto; /* 让视频按比例自适应 */
  }
}

总结一下：核心就是避免给视频容器设置固定高度，让视频能根据屏幕宽度自动缩放，同时用宽高比容器或内置类保证视频不会变形。

内容的提问来源于stack exchange，提问作者ace