iframe 的 width="100%" height="100%" 无效，因 height: 100% 要求父元素有明确高度，而响应式布局中父容器高度常为 0；可靠方案是 padding-bottom + position: absolute 实现宽高比自适应。
直接写 width="100%" 和 height="100%" 在 iframe 标签里，基本无效——它只在父容器有明确高度时才可能生效，而绝大多数响应式布局中，父容器高度是动态的、甚至为 0。
为什么 width="100%" 和 height="100%" 不 work
浏览器会把 width 和 height 属性转成内联样式（如 style="width: 100%; height: 100%;"），但 CSS 层级更高时就会覆盖；更关键的是：height: 100% 要求父元素有可计算的高度，而响应式容器往往靠 padding-bottom 或 flex/grid 生成空间，自身 height 是 0。此时 iframe 高度坍缩为 0。
- 写
width="100%" height="500"→ 小屏溢出或留白 - 写
width="100%" height="100%"→ 父容器没设height，iframe高度为 0 - 保留
width="640" height="360"同时加width: 100%; height: 100%→ 前者被后者完全覆盖，宽高比丢失
padding-bottom + position: absolute 是唯一可靠方案
这是目前兼容性最好、不依赖 JS、能保持宽高比的纯 CSS 方式。核心逻辑：用 padding-bottom 的百分比值（基于父容器宽度）“撑开”容器高度，再用绝对定位让 iframe 填满这个空间。
-
.video-container { width: 100%; height: 0; padding-bottom: 56.25%; position: relative; }（16:9） .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }- 不要在
iframe标签里写width/height属性，它们会干扰 CSS 控制 - 若需适配 4:3，改用
padding-bottom: 75%；21:9 则用padding-bottom: 42.857%
YouTube / Vimeo 等第三方视频嵌入的额外注意点
它们的 iframe 通常自带固定尺寸属性（如 width="560" height="315"），必须手动删掉，否则和 CSS 冲突。
- 复制 YouTube 嵌入代码后，先删掉
width="560"和height="315"这两个属性 - 确保
srcURL 后不带&height=xxx类参数（部分旧版分享链接会带） - 如需自动播放 + 静音（提升成功率），加
?autoplay=1&muted=1&controls=0，但注意移动端仍可能被拦截 - 避免在
iframe上写style="width:100%;height:100%"—— 和外部类重复，且易被覆盖
用 video 标签替代 iframe 的适用场景
如果你控制视频源（比如本地 MP4 或自建 CDN），优先用 video 标签，它原生支持响应式，写法极简：
<video controls><source src="demo.mp4" type="video/mp4"></source></video>- 配 CSS：
video { width: 100%; height: auto; }即可自适应宽高比 - 无需容器包裹、无定位陷阱、兼容性更好（IE9+）
- 但不适用于 YouTube/Vimeo 等第三方服务，只能用于你托管的视频文件
真正容易被忽略的是：哪怕用了 padding-bottom 方案，只要在 iframe 标签里留着原始的 width/height 属性，某些浏览器（尤其是 Safari）仍会尝试按像素渲染，导致比例错乱。删干净，再交由 CSS 控制——这是最常卡住的一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
