CSS overflow:hidden对视频无效，屏幕缩放时视频超出容器求助

问题原因 #

• .video1仅设置height: auto但未限制宽度，容器会完全跟随视频的固定宽度（40rem）展开，导致overflow: hidden没有可隐藏的溢出内容
• 视频使用固定宽度40rem，未做响应式适配，屏幕缩小时无法自动收缩，直接超出容器范围

解决方案 #

方案一：让视频自适应容器宽度（推荐）

给.video1设置最大宽度，同时让视频宽度100%适配容器，确保屏幕缩小时视频不会溢出：

.video1 {
  position: relative;
  bottom: 4rem;
  left: 15rem;
  max-width: 40rem; /* 限制容器最大宽度 */
  width: 100%; /* 容器宽度自适应父元素 */
  height: auto;
  overflow: hidden;
}

.video1 video {
  width: 100%; /* 视频宽度跟随容器 */
  height: auto; /* 保持视频比例 */
}

方案二：保留视频固定宽度，限制容器视口占比

如果需要视频保持固定宽度，可通过视口单位调整定位，并限制容器最大宽度不超出视口：

.video1 {
  position: relative;
  bottom: 5vw; /* 用vw替代固定rem，适配不同屏幕 */
  left: 10vw;
  width: 40rem;
  max-width: 90vw; /* 避免容器超出视口 */
  height: auto;
  overflow: hidden;
}

.video1 video {
  width: 100%;
  height: auto;
}

额外优化建议 #

如果需要视频保持固定比例，可给.video1添加aspect-ratio属性替代height: auto，更精准控制容器尺寸：

.video1 {
  /* ...其他样式... */
  aspect-ratio: 16/9; /* 根据视频实际比例调整 */
}

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