iframe height="100%"失效因父容器无显式高度，导致高度坍缩为0；可靠方案是用padding-top百分比（如16:9用56.25%）配合position:relative/absolute实现宽高比自适应，且需移除iframe的width/height属性。
iframe 本身不支持响应式缩放，必须靠包裹容器接管宽高控制；直接设 width="100%" 和 height="100%" 在大多数场景下会失效，甚至导致 iframe 完全消失。
为什么 height="100%" 总是不生效
浏览器要求 height: 100% 的元素必须有可计算高度的父级，但响应式容器（如空 <div>）默认 <code>height: auto，实际高度为 0。此时 iframe 高度坍缩，整个区域可能不可见。
-
width="100%" height="360"→ 小屏横向溢出或被裁剪 -
width="100%" height="100%"→ 父容器无显式高度，iframe 高度为 0 - 保留
width="640" height="360"再加 CSSwidth: 100%; height: 100%→ 原始 HTML 属性被覆盖，比例丢失且移动端失效
用 padding-top 构建等比容器（兼容性最佳）
这是目前最稳定、不依赖 JS、无需现代 CSS 特性的方案。核心是利用 padding-top 百分比值基于父容器宽度计算的特性，构造一个“无高度依赖”的占位区。
- 16:9 宽高比 →
padding-top: 56.25%（即 9 ÷ 16） - 4:3 宽高比（如地图）→
padding-top: 75%（即 3 ÷ 4） - 容器必须设
position: relative，否则position: absolute的 iframe 会脱离文档流 - iframe 必须移除所有
width和heightHTML 属性，否则干扰 CSS 定位
.video-container {
position: relative;
width: 100%;
padding-top: 56.25%;
height: 0;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
移动端必须配 viewport 和 playsinline
即使容器逻辑正确，缺少基础元信息也会导致 iOS Safari 拒绝内联播放或强制全屏，Android WebView 可能忽略懒加载和权限控制。
-
<meta name="viewport" content="width=device-width, initial-scale=1">必须放在最顶部，早于任何 CSS/JS - 视频类 iframe 需加
allow="autoplay; encrypted-media; picture-in-picture; fullscreen; playsinline" - 务必加
loading="lazy"，否则地图或视频资源会阻塞首屏渲染 - 若嵌入 HTTPS 页面但当前页是 HTTP，部分浏览器会拒绝加载并静默失败（无报错）
容易被忽略的细节：安全属性与 referrer 控制
很多响应式 iframe 在开发环境正常，上线后白屏或报错，往往不是尺寸问题，而是权限缺失。
- 第三方内容必须加
sandbox="allow-scripts allow-same-origin allow-popups allow-forms"，否则脚本被禁用 - 跨域请求需配
referrerpolicy="no-referrer-when-downgrade"，避免 Referer 被截断导致认证失败 - Google Maps、YouTube 等平台要求明确声明
allow="geolocation; microphone; camera"才能启用交互功能 - 旧版 Android WebView（Chromium 30 及更早）不支持
aspect-ratio，也不识别loading，padding-top是唯一可靠路径
