使用<video>标签做背景视频需同时满足：设width/height、object-fit:cover、autoplay+muted+loop+playsinline、preload="auto"及pointer-events:none，否则易黑边卡顿或iOS不渲染。
直接用 <video> 标签做背景视频，不加特定 CSS 和属性，99% 会出黑边、卡顿、不自动播，甚至在 iOS 上完全不渲染——这不是代码写错了，是没绕过浏览器策略和渲染机制。
video 标签默认不填满容器，必须配 object-fit: cover
<video> 默认按原始宽高比缩放，设 width: 100vw; height: 100vh; 后，常见上下/左右黑边，或内容被拉伸变形。关键不是调尺寸，而是控制「如何适配」。
-
object-fit: cover;是唯一推荐方案：保持比例、裁切溢出部分，实现真正覆盖 -
object-fit: fill;强制拉伸，人像变胖、文字压扁，尤其在 16:9 视频配 21:9 屏幕时形变明显 - 必须同时满足两个前提：video 元素有明确尺寸（如
width: 100vw; height: 100vh;），且父容器不能有transform或clip-path干扰渲染 - 移动端 Safari 偶发第一帧不生效：加
preload="auto"，再用 JS 监听loadedmetadata事件显式设置style.objectFit = 'cover'
autoplay 失效？缺 muted 就等于没写
Chrome、Safari、Edge 全部禁止非用户手势触发的有声自动播放。autoplay 单独存在等于无效，必须搭配 muted 才能触发。
- 必须同时写：
autoplay、muted、loop、playsinline（iOS 必须） -
playsinline缺失会导致 iOS Safari 弹出全屏播放器，破坏背景效果 - 建议加
poster属性提供首帧占位图，避免加载空白；设aria-hidden="true"避免屏幕阅读器误读 - 不要用 JS 调用
play()替代autoplay属性——浏览器策略只认 HTML 属性级静音
移动端和低性能设备的降级处理
4K 视频在中低端手机上容易卡顿、发热、耗电快，不是所有用户都愿意为视觉效果牺牲体验。
立即学习“前端免费学习笔记（深入）”；
- 用
@media (max-width: 768px)或(prefers-reduced-motion: reduce)直接隐藏<video>，换静态background-image - 视频源优先提供 MP4（H.264）+ WebM（VP9）双格式，提升兼容性；WebM 体积通常比 MP4 小 30%～50%
- 压缩工具推荐 FFmpeg：
ffmpeg -i input.mp4 -vcodec libx264 -crf 23 -preset fast -vf "scale=1920:-2" output.mp4 - 避免在
<body>直接放<video>：用独立<div class="video-background">包裹，便于 CSS 控制层级和降级
z-index 和 pointer-events 容易被忽略的细节
视频盖住按钮、表单、导航栏？不是层级没设对，是漏了交互穿透控制。
-
z-index: -1不够保险，推荐z-index: -100，避免被其他负值元素干扰 - 必须加
pointer-events: none;，否则视频层会拦截鼠标/触摸事件，导致点击失效 - 如果视频容器用了
position: fixed，确保其父级没有overflow: hidden或transform，否则可能截断渲染区域 - 内容层建议加半透明遮罩（如
background: rgba(0,0,0,0.3)），提升文字可读性，而不是单纯调字体颜色
最常被跳过的其实是视频源质量本身：720p 视频用 object-fit: cover 在 4K 屏上放大后模糊，这时候换高清源比调 CSS 更有效。别把渲染问题当成样式问题去 debug。
