video需设Object-fit:cover、display:block，父容器设明确高度并overflow:hidden；背景视频必用cover并确保关键内容在安全区；自动播放须同时加autoplay、muted、playsinline；poster用webp格式首帧图提升首屏体验。
video元素默认不铺满容器怎么办
直接给 video 设 width: 100%; height: 100% 会拉伸变形，尤其当视频宽高比和容器不一致时。根本原因是浏览器按原始尺寸渲染 video，它不像 img 那样原生支持 object-fit 的缩放逻辑——但其实支持，只是得手动开。
- 必须显式设置
object-fit: cover（或contain），否则无效 -
video需要设为块级元素，否则height: 100%在父容器未定高时失效 - 父容器（比如
.hero）必须有明确高度，常用min-height: 100vh或固定像素值 - 别忘了加
overflow: hidden，避免裁剪边缘漏出黑边
cover 和 contain 在背景视频里怎么选
object-fit: cover 会等比缩放并裁剪，确保填满；object-fit: contain 则完整显示全画面，留黑边。做背景视频几乎总是用 cover——用户不关心视频边缘内容，只想要视觉饱满感。
-
cover下，关键内容（如人脸、LOGO）务必放在视频“安全区”，即居中 70% 区域内 - 如果视频本身是横屏拍的，而页面在手机竖屏下展示，
cover会裁掉上下，不是左右——这点常被误判 - 不用
scale()或transform模拟cover，性能差且无法响应式重算
移动端自动播放失败的常见原因
ios 和 android 大部分浏览器禁止静音以外的自动播放，即使加了 autoplay 和 muted，也常因策略升级而失效。
- 必须同时带
autoplay、muted、playsinline三个属性，缺一不可 -
playsinline对 iOS 尤其关键，否则视频会跳全屏 - 有些安卓 webview 仍需用户手势触发一次
play()，可监听scroll或touchstart后调用，但别太激进——首次交互后才播更稳妥 - 别依赖
canplaythrough事件判断是否能播，改用oncanplay+play().catch()捕获拒绝
用 poster 替代首帧闪动或加载空白
视频加载慢时，video 会先显示黑屏或首帧模糊，体验断层。用 poster 属性设一张静态图，能稳住第一眼视觉。
立即学习“前端免费学习笔记（深入）”；
-
poster图片应与视频首帧高度一致，推荐用同一帧导出，避免色差或构图偏移 - 图片格式优先选
webp，体积比 JPG 小 30%+，加载更快 - 别把
poster当 fallback：它只在未开始播放前显示，一旦加载完成就消失，不参与后续渲染 - 如果服务器不支持
webp，可用<picture></picture>+<source type="image/webp"></source>回退，但 video 标签本身不支持该语法，得靠 js 动态设poster
实际最麻烦的不是写法，是视频源本身——分辨率不够、编码参数不对（比如没开 CABAC）、关键帧间隔太长，都会导致首帧卡顿或 cover 裁切错位。上线前务必用真机测不同网络下的首帧时间。