构建16:9比例HTML视频播放器遇问题：视频高度超视口出滚动条

嘿，我刚碰到过类似的坑！你用的padding-bottom:56.25%方案本身是实现16:9比例的标准操作，但出现滚动条大概率是因为几个容易忽略的小细节，咱们一步步搞定它：

先排查基础样式问题 #

浏览器默认会给body设置margin，这会让你的视频容器整体高度悄悄超出视口一点点，先把这个默认样式重置掉：

body {
  margin: 0;
  padding: 0;
}

优化容器和视频的样式 #

你的容器样式可以调整得更严谨，同时给视频加上比例保护属性，彻底避免溢出：

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9的核心比例，9÷16=0.5625 */
  height: 0;
  overflow: hidden; /* 把超出容器的部分直接藏起来 */
  max-width: 100vw; /* 容器宽度不超过视口，防止意外出现水平滚动 */
}

.video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* 关键！保持视频原始比例，不会拉伸也不会溢出容器 */
}

完整可运行代码示例 #

把这些整合起来，就是一个不会出现滚动条的16:9视频播放器了：

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    .video-container {
      position: relative;
      padding-bottom: 56.25%;
      height: 0;
      overflow: hidden;
      max-width: 100vw;
    }
    .video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  </style>
</head>
<body>
  <div class="video-container">
    <video controls class="video">
      <source src="/text.mp4" type="video/mp4" />
    </video>
  </div>
</body>
</html>

关键要点说明 #

• 重置body的默认margin是很多人容易漏掉的一步，这是导致页面出现垂直滚动条的常见元凶
• object-fit:contain会让视频严格保持自身比例，同时完整显示在容器内，不会超出边界
• overflow:hidden确保容器内的任何溢出内容都被隐藏，不会干扰整体页面布局

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