一个做包装设备的客户兴冲冲地在首页嵌了三段工厂视频，结果手机上打开，第二段视频硬生生把页面撑出一条横向滚动条，另外两段加载了半天还是黑屏。他问我视频是不是传错了。视频本身没问题，错在嵌入方式。视频是最容易打动客户的素材，也是最容易搞坏手机端页面的东西。好素材配坏嵌入，等于把王牌打成了负分。
视频撑破页面，错在哪
视频播放器默认带着固定宽高，电脑上宽一千像素没问题，手机屏幕才三百多像素，直接溢出。正确做法是给视频容器锁定比例，宽度跟屏幕走，高度按十六比九自动算，任何屏幕上都不溢出。这是响应式网站设计里视频适配的第一步，也是最基础的一步。听着简单，实际项目中视频溢出的问题出现频率高得离谱，很多是客户自己后台编辑时随手贴的嵌入代码，没经过任何处理。
比溢出更伤的是拖慢
直接嵌入视频代码，页面一打开就会加载播放器脚本，嵌三个视频，首屏速度直接被拖垮两三秒。更好的做法是封面占位：页面先显示视频封面图，客户点了再加载播放器。封面图不大，加载快，还顺便告诉客户这里有什么内容。配套三个细节：
- 封面用关键帧：选画面最有信息量的一帧，别用黑屏或者糊掉的转场帧；
- 视频放托管平台：传YouTube或者专业视频托管服务，别把几百兆的文件直接丢在自己服务器上，流量扛不住；
- 手机端自动静音：海外客户很多在办公室或通勤路上看，自动出声体验很差，静音加字幕是通用做法。
还有语言问题：视频里最好配英文字幕，很多海外客户办公环境不方便开声音，有字幕的视频完播率明显高。花几百块做个字幕，比重新拍一条视频便宜太多。
自查和补救
手机打开带视频的页面，看三样：有没有横向滚动条、点开播放是否流畅、封面是否清晰达意。有问题先从封面占位改造入手，这一项改动就能同时解决速度和溢出两大问题。视频一多，还可以做成列表页，首页只放最惊艳的一条，其余交给产品页分摊。
建议产品视频统一走托管平台嵌入，别用本地文件；改造时优先处理首页和主力产品页。拿不准嵌入代码写法规范的，把页面发给比格网络这类团队看一眼，他们在响应式网站设计里处理视频适配是常规操作，半小时就能给出一套改法。动手前先确认一件事：视频的宽度设置是不是被后台编辑器改过，很多溢出就是这么来的。
