padding-top 能锁住视频宽高比是因为其百分比值基于父容器宽度计算，配合绝对定位子元素可实现响应式比例控制；需设父容器 position: relative、禁用 height、子元素 absolute 填满，16:9 对应 56.25%。
为什么 padding-top 能锁住视频宽高比
因为 CSS 的 padding-top 百分比值是相对于父容器宽度计算的，而高度本身不参与流式布局的“挤压”，所以用它撑开容器高度，就能让内部视频（或 iframe）在宽度变化时自动维持比例。这不是黑魔法，是 CSS 规范里明确定义的行为。
常见错误现象：height: 56.25% 不生效、视频被拉伸、响应后上下留白或溢出。根本原因往往是父容器没设 width 或没关掉 height 的固定值。
- 必须给父容器设
position: relative，否则子元素的absolute定位会脱标失效 - 父容器不能设
height（尤其是像素值），否则padding-top的百分比会被忽略或计算异常 - 视频容器（如
<iframe></iframe>）要用position: absolute+top/left/width/height: 0填满 - 16:9 对应
padding-top: 56.25%（9 ÷ 16 = 0.5625），4:3 是75%，别手算错
iframe 嵌入 YouTube/Vimeo 时怎么套用
直接套通用结构就行，但要注意平台默认 iframe 会带内联 width 和 height，必须覆盖掉，否则响应式会失效。
使用场景：博客文章、CMS 页面、静态站点中嵌第三方视频，又不想引入 JS 库。
立即学习“前端免费学习笔记（深入）”；
- 删掉 iframe 上原始的
width和height属性（HTML 属性或 style 里的都算） - 确保 iframe 父容器有 class（比如
video-wrapper），并在 CSS 中写死padding-top - YouTube 的
src后面建议加?autoplay=0&modestbranding=1&rel=0减少干扰 - Vimeo iframe 需要加
&byline=0&portrait=0&title=0才干净
.video-wrapper {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 */
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}用 aspect-ratio 替代？兼容性怎么权衡
现代写法当然该用 aspect-ratio: 16 / 9，但它在 Safari 15.4 之前、所有 IE、旧版 Android WebView 里完全不支持。不是“部分支持”，是压根不认识这个属性。
性能影响几乎为零，但如果你的用户里还有 iOS 15.3 及更早设备（尤其企业内网、教育终端），padding-top 仍是唯一可靠方案。
- CanIUse 数据显示：全球约 3.2% 的桌面用户、8.7% 的移动端用户仍无法解析
aspect-ratio - 不要用
@supports (aspect-ratio: 1/1)回退——老浏览器连 @supports 都不支持，会直接跳过整段规则 - 稳妥做法：先写
padding-top方案，再在后面叠加aspect-ratio覆盖（新浏览器优先用后者）
自定义视频标签（<video></video>）怎么处理全屏和 controls
<video></video> 本身没有宽高比锁定逻辑，padding-top 容器对它同样有效，但要注意原生 controls 在全屏时可能破坏布局，且某些安卓 WebView 会强制重置 video 尺寸。
容易踩的坑：加了 controls 后，iOS Safari 全屏退出时容器高度塌陷；部分安卓机点击播放按钮瞬间触发缩放。
- video 标签必须放在
padding-top容器内，且自身不设width/height属性 - 加
webkit-playsinline和playsinline属性，避免 iOS 强制全屏 - 如果用
object-fit: cover，记得同时设width: 100%; height: 100%，否则可能裁切异常 - 不要监听
webkitbeginfullscreen做尺寸修复——时机难控，反而引发抖动
实际最麻烦的不是写法，是测试时发现某台 iPad mini 4 在微信内置浏览器里 padding 计算偏移 2px——这种问题没法靠文档解决，只能真机蹲点抓。
