Vimeo视频响应式嵌入问题：自定义CSS无法实现全屏适配

问题出在直接给iframe设置width:100%时，高度无法跟随容器自适应，导致无法填满标记的红色边框区域。正确的做法是利用宽高比占位法实现响应式适配，具体修改如下：

修改后的HTML（无需调整结构，保留原有容器即可） #

<!-- video -->
<div class="video-inner-container">
    <iframe src="https://player.vimeo.com/video/644944833?h=bbb92c5056&loop=1&title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
</div>

修改后的CSS #

/* video */
.video-inner-container{
  float: left;
  width: 100%;
  outline: red 1px solid;
  position: relative; /* 作为iframe的定位父容器 */
  padding-top: 56.25%; /* 维持16:9的视频宽高比，4:3比例则改为75% */
}

.video-inner-container iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none; /* 移除默认边框 */
}

原理说明 #

• 给容器设置padding-top:56.25%是因为16:9比例中，高度=宽度×9/16=56.25%，容器会根据自身宽度自动计算高度，保持视频原始比例。
• 将iframe设为绝对定位并铺满容器，就能让视频完全填充红色边框标记的区域，同时在窗口尺寸变化时自动适配。

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