HTML5视频作背景需显式锁定宽高比（如aspect-ratio:16/9）、用object-fit:cover填充、父容器设position:relative并避免overflow:hidden，移动端须加playsinline和webkit-playsinline支持内联播放。
HTML5 视频作为背景时，不能只靠 width: 100% 就完事。它既要填满容器、保持比例，又不能拉伸变形、裁剪错位，还得在移动端正常内联播放——这些都得靠一套协同生效的尺寸逻辑。
宽高比必须显式锁定
视频背景最怕“塌陷”或“压扁”，根源是浏览器不知道它该有多高。仅设 width: 100% 会导致高度为 0 或随内容撑开，失去控制。
- 现代首选：
aspect-ratio: 16 / 9（按实际视频比例调整，如 4/3、21/9）直接写在<video>上，配合width: 100%; height: auto; - 兼容旧版 Safari 或 Android 4.x：用包裹容器 +
padding-bottom技巧，例如padding-bottom: 56.25%（对应 16:9） - 切记不要给
<video>设固定height或max-height，否则会破坏比例计算
画面填充策略要匹配场景
填满 ≠ 看全。object-fit 决定怎么“塞”进容器：
-
object-fit: cover：推荐用于背景视频——等比缩放并裁剪边缘，确保无黑边、不拉伸，视觉更干净 -
object-fit: contain：适合需要完整展示内容的场景（如教学演示），但会留上下/左右黑边 - 避免用
object-fit: fill，它强制拉伸，彻底破坏原始比例
容器与定位需配合行为
视频背景常被嵌入全屏区域或卡片中，父容器行为直接影响渲染效果：
立即学习“前端免费学习笔记（深入）”；
- 外层容器设
position: relative，保证内部绝对定位的视频能正确锚定 - 若视频需覆盖整个视口，容器加
width: 100vw; height: 100vh;，再用object-position微调焦点区域 - 避免父容器有
overflow: hidden且未预留足够空间，否则 controls 或 poster 可能被意外裁掉
移动端播放必须显式声明内联
iOS Safari 默认点击即全屏，会跳出页面流——对背景视频来说就是灾难：
- 必须同时添加两个属性：
playsinline（标准）和webkit-playsinline（兼容） - 确保页面有正确 viewport 声明：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 静音自动播放需搭配
muted autoplay，否则多数浏览器会拦截
