video标签铺满首屏需用position:fixed+100vw/100vh+object-fit:cover+z-index:-1，必加autoplay muted playsinline，配合poster兜底和viewport声明，并注意dvh兼容性及fallback。
video 标签如何设置才能铺满首屏
直接用 <video> 默认不会铺满，必须配合 CSS 控制尺寸和定位。关键不是加 width="100%" height="100%"（这只会拉伸变形），而是用 object-fit: cover + 绝对定位 + 首屏高度约束。
- 把
<video>放在<body>直接子级或独立容器内，避免父容器有 padding/margin 干扰 - 给 video 设置
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;—— 注意是vw/vh，不是% - 必须加
object-fit: cover;，否则视频会被强行拉宽或压扁；contain会留黑边，fill严重变形 - 加
z-index: -1;确保内容层在视频上方，但注意：如果页面有透明背景的导航栏，可能需要额外设background-color防透底
autoplay 和 muted 是强制要求吗
是。现代浏览器（Chrome、Safari、Edge）默认禁止自动播放带声音的视频，不加 muted 会导致视频静音、暂停，甚至完全不加载。即使你写了 autoplay，没 muted 就等于没写。
-
autoplay和muted必须同时存在，且推荐显式写出：autoplay muted - 加
playsinline（iOS Safari 必需），否则全屏播放后退出会卡住 - 不要依赖
loop来“掩盖”加载失败——有些设备首次加载失败后不会重试，建议加preload="auto" - 如果视频太大，首屏卡顿明显，考虑用
poster属性设首帧图作为占位，比如：poster="cover.jpg"
移动端适配常见失效原因
在 iPhone 或安卓 Chrome 上铺不满、顶部留白、横屏错位，基本都跟 viewport 或缩放行为有关，不是 CSS 写错了。
- 确认
<head>里有正确 viewport 声明：<meta name="viewport" content="width=device-width, initial-scale=1.0"> - iOS Safari 对
vh有 bug：地址栏收起/展开时100vh会变，导致视频突然裁切。临时解法是用100dvh（仅支持较新系统），或 JS 动态设高度：document.documentElement.style.setProperty('--vh', window.innerHeight * 0.01 + 'px');，再用height: calc(var(--vh) * 100); - 某些 Android 浏览器对
fixed+video渲染异常，可尝试加transform: translateZ(0);触发硬件加速 - 别用 background-video 方案（即把 video 当 background-image 用），CSS
background-size: cover对 video 不生效
替代方案：用 poster 图片兜底更稳妥
视频加载慢、失败、被拦截时，用户看到的是空白或闪烁，体验比一张高清封面图差得多。尤其在国内弱网环境下，优先保证视觉可达性。
立即学习“前端免费学习笔记（深入）”；
- 用
poster属性提供首帧图，尺寸建议 ≥ 1920×1080，格式用 WebP 减小体积 - JS 检测视频是否就绪：
video.readyState >= 2再移除 poster 占位，避免闪动 - 如果业务允许，首屏只用 poster + 播放按钮，点击后再加载并播放视频，兼容性最好、性能最可控
- 慎用第三方库（如 bg-video），多数只是封装了上述逻辑，还可能引入 CORS 或 autoplay 策略问题
实际项目里，最常被忽略的是 dvh 替代 vh 的兼容性判断，以及 poster 加载失败时没 fallback 图片——这两点一旦出问题，首屏就是白屏或错位，用户根本看不到内容。
