视频响应式需用容器的aspect-ratio: 16/9配合width: 100%，或旧safari降级为padding-bottom: 56.25%+绝对定位；video本体设width: 100%; height: 100%; object-fit: contain/cover，并添加playsinline。
直接在 <video></video> 上写 width="640" height="360" 或只加 width: 100%，视频在手机上大概率塌高、controls 挤成一条线、点不动——这不是代码写错了，是漏掉了宽高比约束这个关键环节。
用 aspect-ratio 控制容器比例（现代浏览器首选）
这是目前最干净、最不易出错的方式，但必须写在父容器（如 <div>）上，不能直接写在 <code><video></video> 标签上。
-
aspect-ratio: 16 / 9表示固定 16:9 比例，浏览器会自动算出高度，你只需指定宽度 - 必须配合
width: 100%，否则容器没宽度，aspect-ratio失效 -
<video></video>本体设width: 100%; height: 100%; object-fit: contain（完整显示）或cover（填满裁边） - Safari ≤15.3 不支持
aspect-ratio，需用@supports降级（见下条）
老 Safari（≤15.3）怎么 fallback 到 padding-bottom
旧版 Safari 不识别 aspect-ratio，得靠传统技巧：用 padding-bottom 触发垂直方向的相对计算（CSS 中只有 padding/margin 的百分比值相对于父容器宽度）。
- 外层容器设
position: relative; width: 100%; height: 0; padding-bottom: 56.25%（16:9 对应值） - 内部
<video></video>设position: absolute; top: 0; left: 0; width: 100%; height: 100% -
padding-bottom值必须是小数形式（如56.25%），不能写成56%或56.2%，否则 16:9 会轻微变形 - 记得给容器加
overflow: hidden，否则object-fit: cover可能溢出
object-fit 选 contain 还是 cover？
这个属性作用于 <video></video> 元素本身，不同取值带来截然不同的视觉效果，且必须满足两个前提才生效：有明确的尺寸（如 width: 100%; height: 100%），且父容器提供可计算的高度。
-
contain：保持比例、完整显示全部画面。适合教学演示、预览缩略图——留黑边但内容零丢失 -
cover：保持比例、填满容器、裁剪边缘。适合全屏播放、海报图——无黑边且不失真 -
fill：强行拉伸填满，忽略原始比例。慎用，仅适用于非关键内容（如纯装饰性背景） - 如果视频源本身带黑边（letterbox），
cover可能放大黑边区域，此时改用fill更稳妥
为什么 width: 100%; height: auto 常常失效
因为 <video></video> 是替换元素，它的“固有尺寸”来自视频文件元数据，不是 CSS 能直接 override 的。仅靠 height: auto，浏览器会在父容器没有明确宽高上下文时算出错误高度（比如 0）。
- 父容器必须有可测量宽度（如
max-width: 100%），否则width: 100%没意义 - 不要用
vh/vmax硬设高度——屏幕尺寸变化时比例仍会断 - 不要依赖 HTML 的
width/height属性——它们不反映真实宽高比（如 720×480 的 DV 视频可能是 4:3 或 16:9） - 移动端还需加
playsinline和webkit-playsinline，否则 iOS 默认强制全屏
真正容易被忽略的是：宽高比约束必须由容器承担，<video></video> 本身只是内容载体；一旦忘了给容器设比例或 fallback，所有后续样式都会在不同设备上表现不一致。
