现代浏览器首选 aspect-ratio: 16 / 9 控制视频容器比例，需配合 width: 100% 且不设 height；兼容方案用 padding-bottom: 56.25% + height: 0 + position: relative；video 必须设 width: 100%; height: 100%; object-fit: cover；iOS 内联播放需同时加 playsinline 和 webkit-playsinline。
用 aspect-ratio 直接控制容器比例（现代浏览器首选）
直接给视频的父容器（比如 <div class="video-container">）加 aspect-ratio: 16 / 9，比写一堆 hack 更干净。它不依赖 JS，也不靠 padding 计算，浏览器原生算高。
但必须配对使用：width: 100%（或明确宽度），否则容器没基准宽度，aspect-ratio 就没意义；height 不能设固定值，也不能设 height: 0，否则会覆盖比例计算。
-
aspect-ratio只作用于块级或弹性/网格子项，别塞进display: inline的元素里 - Safari 15.0–15.3 会静默忽略这个属性，真机测试不能跳过
- 如果父容器是 Flex 且
align-items: stretch（默认），子项可能被拉高变形，加align-self: center修复
用 padding-bottom 实现全兼容方案（IE11 也稳）
老浏览器不认 aspect-ratio，但所有主流浏览器（包括 IE11）都支持 padding-bottom 百分比按父宽计算——这是最稳的 fallback 方案。
关键不是“怎么写”，而是“为什么这么写”：因为 padding-bottom: 56.25% 是 9 / 16 * 100%，它让容器高度 = 父宽 × 0.5625，天然锁定 16:9。但前提是容器自身不能有内容撑高，所以必须写 height: 0。
立即学习“前端免费学习笔记（深入）”；
- 外层容器必须设
position: relative，否则内部video的position: absolute会相对于 body 定位 - 别给容器设
min-height、line-height或overflow: visible，它们会干扰 padding 占位 - 数值别硬背，现场算更可靠：
(height ÷ width) × 100%；竖屏视频（9:16）就是16 / 9 × 100% ≈ 177.78%
object-fit 和 video 自身样式怎么配才不出黑边或拉伸
aspect-ratio 或 padding-bottom 只管“框”的比例，不管“里面的内容”怎么铺。真正决定画面是否填满、是否裁剪、是否留黑边的，是 video 元素自身的 object-fit 和尺寸声明。
错误做法是只写 width: 100% 不写 height: 100%，或者在 <video> 标签里写 height="360" —— 这些都会覆盖 CSS，导致比例失效。
-
video必须设width: 100%; height: 100%，再配object-fit: cover（推荐，填满+居中裁剪）或contain（完整显示+留黑边） - 如果外层容器加了
overflow: hidden，而video又用了cover，裁掉的部分就不可见——这不是 bug，是预期行为 - 千万别用
object-fit: fill，它强制拉满，必变形
iOS Safari 全屏和内联播放常被忽略的硬性条件
哪怕容器比例完全正确，iOS 上点一下还是跳全屏，大概率是因为漏了这两个属性，而且必须同时存在：playsinline 和 webkit-playsinline。
还有两个隐藏门槛：一是 <meta name="viewport"> 必须允许缩放控制（比如 maximum-scale=1.0），二是 <video> 必须静态写在 HTML 里，不能用 JS 动态插入后补属性——Safari 不认。
- 自动播放需同时满足三个条件：加
muted、加autoplay、且首次触发由用户手势（如 click）发起 -
controlslist="nodownload"或disablepictureinpicture在某些 iOS 版本会连带禁用全屏按钮 - poster 图片尺寸最好和视频原始比例一致，否则加载时会先拉伸再回正，体验断层
实际中最容易被忽略的是：video 的 poster 图片尺寸是否匹配视频原始比例，以及 Safari 15.0–15.3 对 aspect-ratio 的静默忽略——这两处不测真机，上线就翻车。
