如何通过CSS修复9:16比例响应式HTML视频播放器溢出屏幕需滚动的问题

问题根因：你当前的CSS配置优先让视频宽度占满整个视口，9:16比例的竖版视频宽度占满时，高度为宽度的16/9倍，会超出视口高度，因此出现滚动条。无需修改HTML代码，仅调整CSS即可解决，完整修改后的CSS如下：

/* 先全局重置默认样式，消除浏览器默认边距的影响 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.vidcont {
  /* 容器占满整个视口高度，内部视频水平垂直居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.vidcont video {
  /* 强制保持9:16的竖版比例 */
  aspect-ratio: 9/16;
  /* 宽高自适应，避免拉伸变形 */
  width: auto;
  height: auto;
  /* 限制最大宽高不超过视口，避免溢出 */
  max-width: 100vw;
  max-height: 100vh;
  /* 保证视频内容完整展示，无裁剪 */
  object-fit: contain;
}

配置说明 #

• 全局样式重置：清除浏览器默认给body添加的边距，避免边距导致视口高度计算偏差，出现不必要的滚动条
• 外层容器配置：让容器占满整个视口高度，视频在容器内水平垂直居中，横竖屏场景下都能居中展示，不会贴边
• 视频元素配置：
  • aspect-ratio: 9/16 强制锁定视频的竖版比例，不会因为自适应拉伸变形
  • 宽高设置为auto，配合最大宽高限制，自动适配横竖屏场景：
    • 竖屏设备：视频宽度占满视口，高度按比例自动计算，不会超出视口高度
    • 横屏设备：视频高度占满视口，宽度按比例自动计算，左右自动留白
  • object-fit: contain 保证视频内容完整展示，不会出现裁剪

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