最简方案是 aspect-ratio，但旧浏览器需回退 padding-bottom + position: absolute；height: auto 无法响应宽高比，object-fit 不解决容器比例失准；兼容方案须设 position: relative、height: 0、padding-bottom: 56.25%，video 移除内联宽高。
直接用 aspect-ratio 是最简方案，但 Safari 15.3 以下、旧版 Chrome 和部分安卓 WebView 不支持——这时候必须回退到 padding-bottom + position: absolute 组合。
为什么不能只写 width: 100%; height: auto;
浏览器会按视频原始尺寸计算 height: auto，导致小屏下黑边严重或内容被裁切；object-fit 只控制内容填充方式，不解决容器本身比例失准的问题。
- 常见错误现象：视频在 iPhone 上左右留白巨大，或在平板上上下被截掉字幕区域
- 根本原因：容器高度未锁定比例，仅靠
height: auto无法响应宽度变化 - 若同时设
max-width和height: 100%，父容器无明确高度时，100%计算结果为 0
现代浏览器推荐：用 aspect-ratio + object-fit
Chrome 88+、Firefox 89+、Safari 15.4+ 均已稳定支持，代码干净且语义清晰。
-
aspect-ratio: 16 / 9直接声明比例，无需伪元素或 padding 技巧 -
object-fit: cover确保画面填满且不失真；若需完整显示（如教学视频），改用object-fit: contain并加background-color: #000防白边 - 别对
<video></video>元素设height，它会覆盖aspect-ratio的行为
兼容旧浏览器：padding-bottom 容器必须配 position: relative
这是最容易漏掉的关键点——没有 position: relative，内部 position: absolute 的 <video></video> 会脱离文档流，定位基准变成 body。
- 外层容器必须同时满足：
position: relative、width: 100%、height: 0、padding-bottom: 56.25%（16:9） -
<video></video>必须移除所有内联width/height属性，否则 CSS 会被覆盖 - iOS Safari 初始渲染可能塌陷，给
<video></video>加min-height: 200px防止闪白
嵌入 iframe 视频（如 YouTube）要额外注意跨域和 vh 失效
height: 50vh 在 iOS Safari 横竖屏切换或地址栏收放时会瞬时归零，视频缩成一条线；padding-bottom 方案此时仍是唯一纯 CSS 可靠解法。
- 第三方 iframe（非同源）无法用 JS 获取真实高度，
padding-bottom是底线保障 - YouTube/Vimeo 官方嵌入代码已内置响应式逻辑，优先用它们提供的
<iframe></iframe>，不要手动套容器 - 若 iframe 内容高度动态变化（如带表单的后台页），必须用
postMessage跨域通信传scrollHeight，不能只 onload 发一次
真正难的不是写对一行 aspect-ratio，而是判断什么时候该降级、什么时候该放弃纯 CSS 改用消息通信——尤其是当视频容器嵌在滚动区域或弹窗里时，padding-bottom 的静态高度就成硬伤了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
