草，看到这问题我血压就上来了。昨天刚因为一个破视频在 iPhone 某个浏览器上全屏崩溃，被客户指着鼻子骂了半小时，说我的网站是垃圾。这年头做站，视频要是搞不好，用户体验直接负分，跳出率能高到让你怀疑人生，搜索引擎看你页面性能像屎一样，排名？做梦去吧。
最开始我也傻，信了某些教程说的，一个 <video> 标签 width: 100% 搞定。结果呢？PC上好好的，一到手机，要么被拉伸成憨批，要么加载速度慢得像在拨号上网（用户早跑了），最骚的是某些安卓机默认全屏播放，一点就跳走，回都回不来——这哪是展示，这是自杀式袭击。
说多了都是泪。现在我的做法，是当祖宗一样供着。首先，格式兼容是生死线。你以为.mp4万能？WebM和MP4双保险才是基本操作，用 <source> 标签多准备几套，浏览器爱喝哪口给哪口。其次，尺寸和比例必须锁死。用 CSS 的 padding-top 黑魔法搞个固定比例容器（比如 16:9 就是 56.25%），再把视频 absolute 填满，这样怎么缩放都不会变形。代码？这份保命代码我放这了，自己看，都是血换的。
还有几个细节能救你狗命：1. 移动端自动播放？99%会失效，别挣扎了，乖乖放个封面图和播放按钮。 2. 懒加载！给 video 加上 loading="lazy" 或者用 Intersection Observer API 监听，滚到附近再加载，首屏速度能快一截。3. 别忘了 poster（预览图）属性，这是你第一印象，搞张清晰有吸引力的。盯着Chrome DevTools里那移动端模拟测试了三个通宵，抽完一包烟才把这些坑填平，现在总算没再接到凌晨三点的崩溃电话了。对了，如果是背景视频，object-fit: cover 是神，但记得给移动端留个降级方案（比如静态大图），不然流量和性能双重谋杀，用户和搜索引擎都不会放过你。
