video 背景黑边或变形主因是默认等比缩放且容器尺寸不匹配；需设 width/height 100% + object-fit:cover + object-position:center；ios 必加 playsinline webkit-playsinline muted autoplay 四属性。
video 作为背景时常见的黑边或拉伸变形
根本原因是 video 默认按原始宽高比缩放，而容器尺寸不匹配。浏览器不会自动裁剪或居中覆盖——它只会等比缩放后留白或溢出。
- 用
object-fit: cover强制填满且保持比例，同时配合object-position: center居中裁剪（关键） - 必须给
video设置width: 100%; height: 100%，否则object-fit不生效 - 父容器需有明确宽高（比如
height: 100vh或固定像素），不能依赖内容撑开
如何避免视频加载时闪白或占位错乱
未加载完成的 video 默认显示空白或浏览器默认控件区域，容易破坏背景效果。
- 加
preload="auto"提前加载，但注意移动端可能被忽略 - 用
poster属性设一张首帧截图，作为加载中的占位图：poster="cover.jpg" - 初始隐藏
video，监听canplaythrough事件后再显示，避免闪烁：video.style.opacity = '0'; video.addEventListener('canplaythrough', () => { video.style.opacity = '1'; });
移动端全屏视频背景的兼容性坑
iOS Safari 对自动播放、playsinline 和 webkit-playsinline 要求极严，稍有遗漏就 fallback 成全屏播放或静音限制。
- 必须加
playsinline webkit-playsinline muted autoplay四个属性，缺一不可 -
muted是硬性要求，哪怕后续用 JS 解除静音，也得先带这个属性才能自动播 - 某些 iOS 版本下，
height: 100vh在地址栏收起/展开时会错乱，建议改用min-height: 100vh或 JS 动态设高度
性能与可访问性容易被忽略的点
动态背景视频不是装饰，它直接影响首屏渲染速度、内存占用和屏幕阅读器行为。
- 视频格式优先选
.mp4（H.264）+.webm（VP9）双源，用<source></source>标签包裹，避免单格式失败白屏 - 分辨率别超 1280×720，1080p 视频在中低端设备上容易卡顿或触发降帧
- 加
aria-hidden="true"和role="presentation"，告诉辅助技术这是纯视觉元素，无需朗读
object-fit 没配 width/height，以及 iOS 上少写 webkit-playsinline。这两个一漏，整个背景就垮了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
