移动端视频自适应需同时满足显式宽高比（aspect-ratio或padding-bottom fallback）、object-fit控制填充方式、autoplay/muted/playsinline三属性共存及viewport允许缩放，缺一则导致裁切、黑边、首帧卡死或播放失败。
移动端视频自适应不是靠width="100%"硬拉就能解决的，它本质是宽高比、渲染行为、平台策略三者共同作用的结果。直接设width: 100% + height: auto大概率导致 controls 被裁、画面拉伸、首帧卡死——这不是 CSS 写错了，而是没对准浏览器的渲染逻辑。
video 标签必须显式声明宽高比，不能只靠 CSS 拉伸
浏览器把 <video></video> 当作替换元素（replaced element），它的固有尺寸来自原始分辨率。不提供比例参考，缩放时就只能猜：小屏下高度塌陷、controls 错位、poster 图片被拉变形都是典型表现。
-
aspect-ratio: 16 / 9写在包裹<video></video>的容器上（如<div class="video-wrapper">），不是写在 <code><video></video>自身——Safari ≤15.3 会忽略它，导致height计算为 0 - 老浏览器 fallback 必须用
padding-bottom: 56.25%+height: 0+position: relative容器 +position: absolute视频，缺一不可 - 别信
width属性能“定义基准”——HTMLwidth属性在现代布局中已基本失效，仅作向后兼容，CSS 才是实际控制者 -
object-fit: cover：等比缩放+居中裁剪，无黑边，推荐用于背景视频或主视觉区 -
object-fit: contain：等比缩放+完整显示，必有黑边，适合教学/演示类需保留全部画面的场景 -
object-fit必须配合显式设置的width和height（哪怕只是100%）才生效；只写width: 100%不写height，它就不起作用 - poster 图片必须和视频同宽高比，否则
object-fit会把它一起裁或拉伸 - 必须同时存在：
autoplay、muted、playsinline、webkit-playsinline -
<meta name="viewport">里不能含user-scalable=no或maximum-scale=1，否则 Safari 会拒绝内联播放 - 有声播放必须由用户手势触发（如点击按钮），且
video.play()必须在事件回调同步执行，setTimeout或 Promise.then 里调用大概率失败 - 检查控制台报错是最直接的诊断方式——只要看到那句
DOMException，就是静音或 playsinline 缺失 - 全屏背景视频必须用
position: absolute+top: 0; left: 0; width: 100%; height: 100%脱离文档流，再配object-fit: cover - 嵌入式视频（带标题/描述）建议固定容器宽高比，让内容区域（文字等）在视频上方叠层定位，而不是和视频一起 flex 排列
- 避免给
<video></video>设max-width或min-height——它会和aspect-ratio冲突，导致比例计算异常 - 真要精简 controls，别依赖
controlslist="nodownload nofullscreen"，它只是提示，实际是否隐藏由浏览器决定；要用自定义控件
object-fit 是画面是否完整的关键开关
object-fit 决定视频内容如何填入容器空间，它和 aspect-ratio 配合才真正可控。设错一个值，整个体验就崩：黑边太宽、关键人物被裁、竖屏时上下留空严重。
autoplay 在移动端根本不是“加个属性就行”
iOS Safari 和 Android Chrome 对自动播放有明确拦截规则。没满足全部条件，play() 就会抛出 DOMException: play() failed because the user didn't interact with the document first.，视频永远停在第一帧。
立即学习“前端免费学习笔记（深入）”；
移动端 video 的响应式容器不能依赖父级流式布局
很多开发者试图把 <video></video> 塞进 Flex/Grid 容器里，指望它随父级缩放。结果是：横屏时高度突变、controls 挤成一团、小屏下触摸区域过小。这是因为视频控件本身不具备响应式重绘能力。
最常被忽略的一点：移动端视频的“自适应”不是让画面永远填满屏幕，而是让关键信息始终可见、操作区域始终可点、加载与播放策略符合平台限制。写对 aspect-ratio 和 object-fit 只是起点，muted 和 playsinline 的组合才是能否播出来的分水岭。
