.video-wrap { position: relative; aspect-ratio: 16 / 9; }
.video-wrap iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

内嵌 YouTube 的视频模块在 375 像素宽的手机上右侧超出 40 像素,页面能左右拖动,横屏时超出更多,桌面端完全看不出来。这类现象通常不是突然出现的,往前翻半天日志能看到苗头。

追下去是这么回事:视频 iframe 写死了 width=560,外层容器没有 aspect-ratio,移动端只按 max-width 缩了容器,iframe 保持原宽。构建器的视频小工具没有开启响应式选项。

这次卡住的地方就在「构建器视频溢出」这一环,单独把它拎出来验证,别和其他改动混在同一次发布里。同类问题如果隔一段时间又出现,多半是某个定时任务或重启流程把改动冲掉了。

把这次用到的命令存进笔记,比记住结论有用,换个环境还能照着走。改完隔一天再看一次,当场正常不代表能稳住。

处理上按这个顺序:给外层包一个 position: relative 的容器;iframe 改成绝对定位铺满,宽高各 100%;容器用 aspect-ratio 固定比例,别写死高度。

确认没问题再收工,375 像素下视频完整显示在容器内,页面左右拖不动,横屏也不溢出。

作者 9823189