视频变形或塌高是因为video是替换元素，高度不随width:100%自动缩放，需通过父容器aspect-ratio约束宽高比，并配合object-fit和兼容方案实现响应式适配。
为什么只写 width: 100% 视频就变形或塌高？
因为 <video></video> 是替换元素，它的高度不随 CSS 宽度自动缩放——浏览器会按视频原始分辨率（比如 1280×720）硬算高度，导致小屏上拉伸、大屏上留黑边，甚至 controls 被裁掉。单纯靠 width: 100% 或 max-width: 100% 不解决问题，必须同步控制宽高比。
- 别在
<video></video>标签里写width或height属性，它们会覆盖 CSS，且 IE/旧 Safari 下语义失效 -
height: auto单独用也无效：父容器若没明确宽度（比如外层<div> 没设 <code>width），auto就算不出合理值 - 真正起作用的是父容器的宽高比约束，不是
<video></video>自身样式 - 给父容器加
aspect-ratio: 16 / 9（按实际视频比例改，如4 / 3、21 / 9），再配width: 100% -
<video></video>设width: 100%; height: 100%，并选object-fit: cover（填满裁边）或object-fit: contain（完整显示留黑边） - 别把
aspect-ratio直接写在<video></video>上——部分浏览器不识别，且它不是块级容器，行为不稳定 - 加
overflow: hidden到父容器，防止cover模式下裁剪内容溢出 - 父容器设
position: relative; width: 100%; height: 0; padding-bottom: 56.25%（16:9 对应值） -
<video></video>设position: absolute; top: 0; left: 0; width: 100%; height: 100% - IE11 不支持
object-fit，但contain写上去至少能防止拉伸；加background: #000到容器可统一黑边视觉 - 确保 poster 图片尺寸和视频原始比例一致（如 720p 视频配 1280×720 poster），否则 IE 加载瞬间会跳变
- 必须同时加
webkit-playsinline和playsinline，缺一不可 -
<meta name="viewport">里不能含user-scalable=no，否则全屏 API 被禁用 - 自动播放需三条件齐备：
muted+autoplay+playsinline；JS 触发play()也得等用户 click 后再调 - 动态插入的
<video></video>，属性必须在插入 DOM 前就写好，Safari 不认插入后再 JS 补的属性
aspect-ratio 怎么用才生效？
现代方案首选 aspect-ratio，但它必须写在 <video></video> 的**父容器**上，且容器需有可测量宽度；<video></video> 本体只需填满即可。
老 Safari 和 IE11 怎么兼容？
@supports not (aspect-ratio: 1 / 1) 是标准降级写法，但 IE11 连 @supports 都不支持，得用更底层的 padding 技巧。
iOS 点击不全屏、自动播放失败怎么修？
这不是布局问题，而是 iOS Safari 的硬性策略限制：全屏和自动播放都依赖用户手势上下文，漏一个属性就失败。
