如何让视频iframe在div容器内实现object-fit:cover效果？

原示例通过视口单位（vw/vh）实现了视频铺满整个浏览器窗口，但切换到固定尺寸的自定义容器时，原有的视口媒体查询会失效。以下是针对自定义容器的解决方案，让视频始终完全填充容器，不留空白：

核心思路 #

把原有的视口媒体查询替换为容器查询，让判断逻辑基于容器的宽高比而非浏览器视口。通过调整iframe尺寸，让它始终保持16:9比例并填满容器，超出部分通过overflow:hidden裁剪。

完整代码示例 #

HTML #

<div class="video-wrapper">
  <iframe src="https://www.youtube.com/embed/biWk-QLWY7U?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&mute=1" frameborder="0" controls="0" allowfullscreen></iframe>
</div>

CSS #

* {
  padding: 0;
  margin: 0;
}

/* 自定义尺寸的容器，可按需修改宽高 */
.video-wrapper {
  position: relative;
  overflow: hidden;
  width: 500px;
  height: 1000px;
  /* 启用容器查询上下文 */
  container-type: size;
}

iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 初始尺寸匹配容器 */
  width: 100%;
  height: 100%;
  /* 居中定位，裁剪时保留视频中心区域 */
  transform: translate(-50%, -50%);
}

/* 容器宽高比≥16:9时，将视频高度设为容器宽度的56.25%（16/9的倒数） */
@container (min-aspect-ratio: 16/9) {
  iframe {
    height: 56.25%;
    width: 100%;
  }
}

/* 容器宽高比≤16:9时，将视频宽度设为容器高度的177.78%（9/16的倒数） */
@container (max-aspect-ratio: 16/9) {
  iframe {
    width: 177.78%;
    height: 100%;
  }
}

补充说明 #

• 容器查询需主流浏览器支持（Chrome 105+、Firefox 110+、Safari 16+），若需兼容旧浏览器，可通过JavaScript监听容器尺寸变化，动态调整iframe样式。
• 修改容器尺寸时，直接调整.video-wrapper的width和height即可，视频会自动适配填充。

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