响应式iframe宽度100%实现问题：Vimeo嵌入iframe无法自适应且设置绝对定位后消失

嘿，我来帮你搞定这个Vimeo iframe自适应的难题！你遇到的情况其实很典型，咱们一步步拆解原因和解决方案：

问题根源 #

直接给iframe设置width="100%" height="100%"时，浏览器没法正确计算高度——因为父容器没有明确的高度参考，导致视频显示异常；而单独用绝对定位时，由于父容器没设置相对定位，iframe会相对于整个页面（而不是父容器）定位，很容易跑出可视区域，看起来就像“消失”了；固定高度的方案又会在小屏幕留下空白，完全达不到自适应的效果。

标准解决方案：用容器包裹实现响应式嵌入 #

这是目前最可靠的响应式视频嵌入方法，核心是通过容器的内边距来维持视频的宽高比，再让iframe铺满容器：

1. 创建容器并设置样式 #

先给iframe套一个div容器，用CSS给容器设置相对定位和基于宽高比的内边距：

.vimeo-container {
  position: relative;
  width: 100%;
  /* 16:9 宽高比，计算方式：9/16*100% = 56.25% */
  padding-top: 56.25%; 
  overflow: hidden;
}

如果你的视频不是16:9比例，只需调整padding-top的值：

• 4:3比例：padding-top: 75%（3/4*100%）
• 竖屏9:16比例：padding-top: 177.78%（16/9*100%）

2. 设置iframe的样式 #

让iframe绝对定位铺满整个容器：

.vimeo-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

3. 最终的HTML结构 #

把你的PHP输出的src放到iframe里，套进容器：

<div class="vimeo-container">
  <iframe title="vimeo-player" src="<?php echo $src; ?>" frameborder="0" scrolling="no" allowfullscreen></iframe>
</div>

这样设置后，iframe会自动跟随父容器的宽度变化，同时保持正确的宽高比，不管是大屏还是小屏幕都能完美适配，不会出现空白或消失的问题啦！

备注：内容来源于stack exchange，提问作者netdev