真正起作用的是包裹容器的宽高比控制逻辑，不是 iframe 自身样式；需用 padding-bottom 或 aspect-ratio 控制容器比例，移除 iframe 的 width/height 属性，并配置 playsinline 等移动端参数。
直接给 iframe 写 width="100%" 和 height="100%" 无法保持 16:9，因为父容器高度为 0；真正起作用的是包裹容器的宽高比控制逻辑，不是 iframe 自身样式。
为什么 iframe 的 height="100%" 总是失效
浏览器要求 height: 100% 的元素必须有可计算高度的父级，但响应式容器（如 div）通常靠 padding-bottom 或 flex 生成空间，自身 height 是 0。此时 iframe 高度坍缩为 0，甚至整个区域消失。
-
width="100%" height="360"→ 小屏横向溢出 -
width="100%" height="100%"→ 父容器无明确高度，iframe 高度为 0 - 保留
width="640" height="360"并加 CSSwidth: 100%; height: 100%→ 原始属性被覆盖，比例丢失
用 padding-bottom 构建 16:9 容器（兼容所有浏览器）
这是目前最稳定、不依赖 JS、无需现代 CSS 特性的方案。核心是利用 padding-bottom 百分比值基于父容器宽度计算的特性，构造一个“无高度依赖”的占位区。
- 16:9 对应
padding-bottom: 56.25%（即 9 ÷ 16 = 0.5625） - 4:3 对应
padding-bottom: 75%（3 ÷ 4 = 0.75） - 父容器必须设
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;
}
用 aspect-ratio 替代 padding-bottom（现代项目首选）
aspect-ratio: 16 / 9 更直观简洁，但它**只能写在包裹容器上**，不能直接写在 iframe 上——老 Safari（≤15.3）会忽略该声明，导致容器高度为 0，视频完全不可见。
立即学习“前端免费学习笔记（深入）”；
- 必须搭配
width: 100%使用，否则比例无意义 -
iframe仍需设width: 100%; height: 100%才能填满容器 - 若需支持 iOS 15.3 及更早版本，
aspect-ratio方案必须降级 fallback 到padding-bottom - Bootstrap 5 的
.ratio类底层就是aspect-ratio，但内部仍保留了padding-bottom兜底逻辑
嵌入 YouTube/Vimeo 时容易漏掉的关键点
光控制宽高比不够，移动端播放体验还取决于几个隐藏参数和属性。
- 必须删掉嵌入代码里的
width和heightHTML 属性，否则会破坏 CSS 布局 - iOS Safari 下，不加
playsinline和webkit-playsinline，点击 controls 会强制跳全屏 -
allow="accelerometer; gyroscope; picture-in-picture"要显式声明，否则部分权限（如画中画）默认被禁用 - YouTube 的
?rel=0&modestbranding=1&fs=1这类参数不影响布局，但影响控件行为，别漏掉
真正卡住人的不是怎么写 CSS，而是忘记清理 iframe 原始属性、忽略移动端播放策略、或误把 aspect-ratio 直接写在 iframe 标签上——这三个地方一错，整个视频就“看不见”或“点不动”。
