最推荐用 aspect-ratio: 16 / 9 配合 width: 100% 和 height: auto 实现响应式宽高比，兼容现代浏览器；不支持时用 padding-bottom: 56.25% + position: relative/absolute 兜底；务必移除 video 的 width/height 属性，用 CSS 控制尺寸与 object-fit。
直接用 aspect-ratio 是最干净的解法，但得看你的浏览器支持范围；如果要兼容 IE 或 Android 4.x，就得退回 padding-bottom + position: absolute 套路，否则视频一缩放就变形或溢出。
video 元素本身不维持宽高比，必须靠容器控制
很多人误以为给 <video> 加 width="640" height="360" 就能锁定 16:9，其实这只是固定像素值，响应式下完全失效——它会被 CSS 覆盖，且拉伸变形。真正起作用的是包裹它的容器，不是 video 标签自己。
-
video默认是 inline 元素，底部有空白，记得加display: block - 仅设
width: 100%不够，必须配合height: auto或容器比例约束，否则高度塌陷或错乱 - 父容器若没明确宽度（比如 flex 子项未设
flex-basis），width: 100%会失效，视频可能缩成一条线
现代方案：用 aspect-ratio + object-fit
Chrome 88+、Firefox 89+、Safari 15.4+、Edge 91+ 都支持 aspect-ratio，写法极简，语义清晰，且不依赖 JS 或 hack。
- 容器设
aspect-ratio: 16 / 9，再加width: 100%，高度自动算出 -
video必须填满容器：width: 100%; height: 100%，否则object-fit不生效 - 选
object-fit: contain保全内容（带黑边），或object-fit: cover填满（可能裁边）；后者需同时加overflow: hidden到容器上 - 别在
video上设height属性，否则会覆盖aspect-ratio的自动计算
兼容旧浏览器：padding-bottom 技巧必须配 position: relative/absolute
这个方案本质是用 padding 撑开容器高度（因为百分比 padding 基于父宽），再把 video 绝对定位进去填满。漏掉任一环都会失败。
立即学习“前端免费学习笔记（深入）”；
- 父容器：设
position: relative; width: 100%; height: 0; padding-bottom: 56.25%（16:9） -
video：必须position: absolute; top: 0; left: 0; width: 100%; height: 100% - 常见错误：忘了设
height: 0，导致 padding 和 height 叠加，高度翻倍 - 16:9 →
padding-bottom: 56.25%，4:3 →75%，1:1 →100%，数值不能错
max-width: 100% 和 width: 100% 必须共存
只写 width: 100% 在某些嵌套结构里会越界——比如父容器是卡片且宽度超视口时，视频可能撑破布局。加 max-width: 100% 是兜底。
-
video元素应同时声明：width: 100%; max-width: 100%; height: auto; -
height: auto是关键：它让浏览器按原始比例反推高度，避免压扁 - 如果视频源本身比例不统一（比如混用 16:9 和 4:3），单靠 CSS 无法自适应，得靠 JS 检测或后端归一化
- 移动端务必加
playsinline和webkit-playsinline，否则 iOS 会强跳全屏
最易被忽略的是容器层级关系——aspect-ratio 只作用于块级容器，如果父元素是 display: flex 且未设 align-items: stretch，子容器高度可能被截断；而 padding-bottom 方案里，若中间插了个 transform 或 will-change，也可能破坏定位流。动手前先检查 DOM 结构是否“干净”。
