如何解决大屏幕下video元素出现横向与纵向滚动条的问题

问题原因 #

你当前使用padding-bottom: 56.25%实现16:9比例容器的逻辑，是基于父容器宽度计算高度，当屏幕宽度足够大时，视频容器的高度加上导航栏的4em高度会超过视口总高度100vh，最终导致页面溢出出现滚动条。

修复方案 #

调整布局逻辑，改用flex布局约束整体页面高度，配合aspect-ratio属性保证视频比例的同时限制最大尺寸，不会超出可用视口空间：

body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  /* 新增：垂直flex布局分配高度 */
  display: flex;
  flex-direction: column;
  /* 新增：禁止页面溢出 */
  overflow: hidden;
}

nav {
  background: black;
  height: 4em;
  /* 新增：导航栏固定高度不收缩 */
  flex-shrink: 0;
}

.player-group {
  position: relative;
  /* 删掉padding-bottom的比例实现，改用aspect-ratio */
  aspect-ratio: 16/9;
  /* 新增：占满剩余高度同时不超过可用空间 */
  flex: 1;
  max-width: 100%;
  max-height: calc(100% - 4em);
  /* 新增：水平居中 */
  margin: 0 auto;
}

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

如果需要兼容不支持aspect-ratio的旧浏览器，可以保留padding-bottom逻辑，额外给.player-group加max-height: calc(100vh - 4em);，同时给父容器加overflow: hidden即可达到类似效果。

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