video设width:100%+height:100%无效因它是替换元素，依赖原始分辨率；需配合object-fit:cover、position:absolute及muted等属性实现全屏背景与自动播放。
video 元素直接设 width: 100% + height: 100% 为什么不行
因为 video 是替换元素，浏览器会按其原始分辨率计算固有尺寸。只写 width: 100% 会让宽度拉满，但高度仍按原始像素值渲染——小屏下要么高度塌成一条线，要么上下留大片黑边，甚至把 controls 挤出可视区。更糟的是，如果父容器没明确宽高（比如一个空 div），width: 100% 根本无参照，整个视频可能消失或错位。
全屏背景必须用 object-fit: cover 并作用于 video 自身
要让视频真正“撑满”首屏，关键不是靠父容器 padding-bottom 或 aspect-ratio，而是把样式直接打在 video 上，并强制它填满视口：
-
position: absolute+top: 0; left: 0;脱离文档流，避免被内容推挤 -
width: 100%; height: 100%;确保占满整个视口区域 -
object-fit: cover;保持比例、等比缩放、居中裁剪——这是防止留白/变形的核心 -
z-index: -1;确保文字等内容能正常叠在视频上方
别把 object-fit 写在父容器上，它对 video 有效，但只在 width 和 height 显式设置后才起作用。
移动端自动播放失败的硬性条件缺失
iOS Safari 和 Android Chrome 对有声自动播放有强拦截。如果视频卡在首帧、控制条不出现、控制台报 DOMException: play() failed because the user didn't interact with the document first.，大概率是以下任一条件没满足：
立即学习“前端免费学习笔记（深入）”；
-
autoplay属性必须存在 -
muted必须存在（静音是强制前提） -
playsinline必须存在（防止跳转全屏） -
webkit-playsinline必须存在（Safari 旧版本兼容） -
<meta name="viewport">中不能禁用缩放（如user-scalable=no会干扰内联播放）
缺一个，autoplay 就失效，用户不点就播不了——这不是 bug，是平台策略。
aspect-ratio 写在容器上才有降级意义
现代方案推荐用 aspect-ratio: 16 / 9 控制比例，但它必须写在包裹 video 的容器（如 <div class="vid-bg">）上，而不是 video 标签本身：
- 写在容器上：新浏览器按比例缩放容器，老浏览器忽略该行，可走
padding-bottomfallback - 写在
video上：Safari ≤15.3 直接忽略，导致height计算为 0，视频不可见 - fallback 要严格：容器设
position: relative; height: 0; padding-bottom: 56.25%;，内部video设position: absolute; top: 0; left: 0; width: 100%; height: 100%;
容易被忽略的是：padding-bottom 的数值必须和视频真实比例一致（16:9 → 56.25%，4:3 → 75%），且必须配合 height: 0，否则 padding 不生效。
