HTML中iframe嵌套视频播放器的响应式适配教程-html教程-PHP中文网

iframe height="100%"无效因父容器高度为0，需用padding-bottom+position:absolute构建宽高比容器，删嵌入代码中width/height属性，并注意移动端静音内联播放要求。

html中iframe嵌套视频播放器的响应式适配教程

iframe 嵌视频时写 width="100%" height="100%" 基本无效——父容器高度为 0，iframe 直接坍缩成一条线，甚至整个区域消失。

为什么 `height="100%"` 在 `iframe` 上总不生效

浏览器要求 height: 100% 的元素必须有「可计算高度」的父级，但响应式容器（比如 <div>）通常靠 <code>padding-bottom 或 flex/grid 生成空间，自身 height 是 0。此时 iframe 高度被算作 0，视觉上就没了。

width="100%" height="360" → 小屏横向溢出或上下留白
width="100%" height="100%" → 父容器没设 height，iframe 高度为 0
保留 width="640" height="360" 再加 CSS width: 100%; height: 100% → 原始属性被覆盖，宽高比丢失

用 `padding-bottom` 构建 16:9 容器（兼容所有浏览器）

这是目前最稳定、不依赖 JS、无需现代 CSS 特性的方案。核心是利用 padding-bottom 百分比值基于父容器宽度计算的特性，构造一个“无高度依赖”的占位区。

16:9 对应 padding-bottom: 56.25%（即 9 ÷ 16）
4:3 对应 padding-bottom: 75%（即 3 ÷ 4）
父容器必须设 position: relative，否则子元素 position: absolute 会错位
iframe 必须移除所有 width 和 height 属性（包括 HTML 属性），否则干扰 CSS 定位

.video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}