HTML中如何让嵌入式视频支持响应式布局-html教程-PHP中文网

用 padding-top 实现 16:9 容器最稳定，因 padding-top 百分比基于父宽计算，配合 position: relative 和绝对定位 iframe 可避免高度坍缩；现代项目可用 aspect-ratio: 16 / 9，但需 fallback 至 padding-top 兼容旧 safari。

html中如何让嵌入式视频支持响应式布局

直接给 <iframe></iframe> 或 <video></video> 写 width="100%" height="100%" 无法保持 16:9，因为浏览器根本算不出高度——父容器没高度，子元素的 height: 100% 就是 0。

为什么 iframe 的 height="100%" 总是失效

浏览器要求 height: 100% 的元素必须有可计算高度的父级，但响应式容器（比如只设了 width: 100% 的 <div>）自身高度为 0。此时 <code><iframe></iframe> 高度坍缩，整个区域可能完全不可见。

写 width="100%" height="360" → 小屏横向溢出
写 width="100%" height="100%" → 父容器无明确高度，<iframe></iframe> 高度为 0
保留 width="640" height="360" 再加 CSS width: 100%; height: 100% → 原始属性被覆盖，比例丢失

用 padding-top 实现兼容性最好的 16:9 容器

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

16:9 对应 padding-top: 56.25%（即 9 ÷ 16 × 100）
4:3 对应 padding-top: 75%（3 ÷ 4 × 100）
容器必须设 position: relative，否则 position: absolute 的 <iframe></iframe> 会脱离文档流
<iframe></iframe> 必须移除所有 width 和 height 属性（包括 HTML 属性），否则干扰 CSS 定位

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