.video-wrap { aspect-ratio: 16 / 9; width: 100%; background: #000; }
.video-wrap video { width: 100%; height: 100%; display: block; }

文章里的视频初始高度 0,封面加载完突然撑到 360px,下面段落整体往下跳,手机上阅读位置直接错乱。先别急着动参数,把报错原文和时间点记下来,顺序反了容易白折腾。

原因不复杂,容器只写了 width: 100%,高度由内容决定,video 元数据到达前高度是 0。没有用 aspect-ratio 或 padding-top 占位,CLS 统计到了 0.28。

「视频布局抖动」改完先别急着全量,挑一台机器放半天,真有问题这段时间就能看出来。动手前把原文件复制一份带时间戳,出问题立刻换回去,比现场分析快得多。

一次只改一处,改完立刻验证,几个改动叠在一起,出问题就说不清是谁导致的。先做最小复现,能稳定跑出来的问题,排查成本会低一个数量级。

别只看报错的最后一行,往上看几行,真正的起因通常在上面。

处理上按这个顺序:给容器加 aspect-ratio: 16 / 9 固定比例;video 设 width 100% 与 display block;老浏览器用 padding-top 百分比兜底。

改完只确认一件事:刷新页面时视频区域一开始就占好位置,下方段落不再跳动。

作者 9823189