插下面视频的尺寸与比例：16:9 之外的取舍

插下面视频为什么 16:9 不是唯一答案

16:9 之所以成为网页视频的默认比例，有很实在的历史原因：它同时兼容了早期宽屏显示器的物理比例与广播电视的传输标准，在桌面端横屏观看时几乎没有浪费。行业通行做法里，桌面端正文内嵌视频的默认容器比例，通常就在 16:9 附近，允许的浮动区间大约在 1.74:1 到 1.82:1 之间，肉眼几乎察觉不到差别。

但「默认」不等于「通用」。当观看场景从桌面横屏挪到手机竖屏，16:9 的短板立刻暴露：一块 375 像素宽的屏幕，16:9 容器只有约 211 像素高，画面里的人物被压成一条，字幕小到需要眯眼。更麻烦的是，很多内容本身就不是横着拍的——短视频、直播切片、产品演示、口播讲解，原生比例往往是 9:16 或 3:4。

把竖着拍的片源硬塞进横着的容器，只有两条路：加左右黑边，或者裁掉上下。加黑边显得页面空旷、点击率下滑；裁掉上下则可能把人的头顶和字幕一起切走。这就是为什么说 16:9 是个好起点，却不是终点。

还有一层现实约束：页面版式。正文宽度通常在 680 到 820 像素之间，这是阅读舒适区的常见范围。在这个宽度里，16:9 容器的高度大约是 383 到 461 像素，占掉一屏的三分之一到一半；而 9:16 容器如果按同样宽度铺满，高度会飙到 1200 像素以上，直接撑爆首屏。所以竖屏比例在正文里几乎不可能满宽使用，必须缩窄或改用并排布局。

插下面视频 尺寸比例怎么选？先看容器再看片源

一句话先说结论：先定容器能给出多大空间，再拿片源比例去匹配，而不是反过来让页面迁就片源。顺序颠倒，后面所有调整都是在补窟窿。这个顺序的依据很朴素：片源比例你改不了，容器比例你能改。

具体怎么落地？我习惯分三步走。第一步，量出这块位置在桌面端和移动端分别有多少可用宽度，注意扣掉内边距与侧栏。第二步，确认片源的原生比例，注意不是看分辨率数字，而是看宽高比本身——1920×1080 是 16:9，1080×1920 是 9:16，这两个数字很容易看串。第三步，在「容器能容纳的比例」和「片源比例」之间找交集，找不到交集时，优先保证主体不被裁切。

插下面视频先确认片源的真实形状

有些片源是带黑边导出的，文件本身是 16:9，但画面内容其实只占中间 4:3 的区域。这种片子如果直接按 16:9 嵌入，看起来正常，实际有效画面被缩小了一圈。判断方法很简单：抽一帧看画面边缘，如果左右有整条纯黑，就属于这种情况，此时按内容区域的实际比例来定容器更合适。

插下面视频再确认容器在两种端上的余量

桌面端和移动端的可用宽度差异可能接近一倍。一个在桌面端看起来舒服的 16:9 容器，到了移动端可能只有两百多像素高，字幕完全看不清。稳妥的做法是给容器设一个最小高度，比如 200 像素，低于这个值时改用其他排布方式，而不是硬缩。

这三步做完，比例基本就定了。剩下的工作是把它写成 CSS，这部分在第六节展开。

常见宽高比对照：从 16:9 到 9:16 的取舍表

下面这张表是我们内部核对时用的速查版本，数值都是按「宽度固定、高度按比例换算」的口径算的，假设容器宽度为 800 像素。实际使用时把宽度换成你自己的数值即可。

看这张表要注意一件事：高度超过 900 像素的那几行，在正文里基本都要配并排布局或缩窄容器，否则一屏放不下。我们实测的经验是，正文内单个视频容器的高度控制在 240 到 520 像素之间，阅读节奏最顺；超过 700 像素，读者往下滚的意愿会明显下降。

另外，比例的「比值」这一列比「宽高比写法」更有用。写 CSS 时真正参与计算的就是这个小数，16:9 写成 1.78 还是 1.7778，在 800 像素宽度下高度差不到 1 像素，可以忽略。

竖屏场景：9:16 与 3:4 的边界在哪

9:16 和 3:4 都是竖的，但气质完全不同。9:16 是手机原生短视频的标准形状，比值约 0.5625；3:4 更接近传统竖版印刷与部分相机的竖构图，比值 0.75。两者差的那 0.19，在 400 像素宽的容器上，高度差是 152 像素——一个能让画面从「刚好」变成「太挤」的差距。

判断用哪个，我一般看两件事。第一件是片源原生比例，能对上就不折腾。第二件是这块位置在页面里的角色：如果视频是主要内容，值得给它一块独立区域，用 9:16 配并排文字；如果只是辅助说明，3:4 更容易和正文段落并排相处。

竖屏容器的宽度上限

竖屏容器有个容易被忽略的上限：宽度。9:16 容器如果宽度给到 400 像素，高度就是 711 像素；给到 500 像素，高度接近 889 像素。在移动端，屏幕可用宽度通常在 335 到 400 像素之间，也就是说竖屏容器几乎总是接近满宽，高度自然就上去了。这就是为什么移动端的竖屏视频，往往需要配合懒加载与静音自动播放策略，否则首屏会被一块大画面占满。

桌面端则相反，竖屏容器千万不要满宽。正文 800 像素宽时，9:16 容器高度会到 1422 像素，几乎是两屏。可行的做法是把竖屏容器限制在 300 到 360 像素宽，高度 533 到 640 像素，然后右侧放说明文字，形成左右并排。

插下面视频什么时候该拒绝竖屏比例

有两种情况我会建议不用竖屏比例。一种是片源本身是横的，硬做成竖屏只能靠裁切，主体几乎必然受损。另一种是页面正文宽度不足 300 像素，此时竖屏容器高度会低于 540 像素，画面细节反而看不清，不如改成 1:1 或直接做成缩略图点击展开。

插下面视频方形与 4:5：信息流里的折中方案

1:1 和 4:5 常被当成「不上不下」的选择，实际它们在信息流场景里非常能打。1:1 的好处是横竖通吃：横屏片源按 1:1 裁切，损失的是左右两侧，主体通常还在；竖屏片源按 1:1 裁切，损失的是上下，人物面部大多能保住。4:5 比 1:1 更瘦一点，比值 0.8，在移动端一屏里能放下更多内容，同时比 9:16 友好得多。

我们观察到的经验区间是：列表卡片类位置，1:1 与 4:5 的点击表现通常好于 16:9，因为卡片在纵向列表里更醒目；而正文内嵌位置，16:9 依然更稳，因为阅读动线是横向的，方形容器会打断文字节奏。

方形比例的裁切安全区

如果决定用 1:1 裁切，务必先确认片源的中心安全区。一个实用的口径是：以画面中心为基准，保留中间约 56% 的宽度与 100% 的高度（横屏片源转 1:1 时），或者保留 100% 的宽度与中间约 56% 的高度（竖屏片源转 1:1 时）。超出这个区域的内容，裁掉就是裁掉了，字幕、角标、二维码这类元素要提前挪进安全区。

4:5 的裁切口径类似，横屏转 4:5 时保留中心约 44% 的宽度。这个比例下，人脸特写会显得偏紧，更适合中景与全景。

顺带说一句，方形与 4:5 在桌面端容易显得过高。800 像素宽的正文里，1:1 容器高 800 像素，4:5 容器高 1000 像素，都超过了一屏的三分之二。所以这两个比例更适合放在侧栏、卡片列表或移动端专属区域，而不是桌面正文的正中。

容器宽高比怎么落地：padding-top 与 aspect-ratio

比例定了，接下来是把它写成代码。老办法是用 padding-top 撑高度：给外层容器设 position: relative，内层绝对定位铺满，外层 padding-top 的百分比就等于「高度 ÷ 宽度 × 100%」。16:9 对应 56.25%，4:3 对应 75%，1:1 对应 100%，4:5 对应 125%，3:4 对应 133.33%，9:16 对应 177.78%。这套写法兼容性最好，几乎任何环境都能跑。

新办法是直接用 CSS 的 aspect-ratio 属性，写 aspect-ratio: 16 / 9 就行，代码短、语义清楚。它在主流现代浏览器里的支持已经相当普遍，但如果你要照顾偏旧的国产双核浏览器内核，建议两套都写：先写 padding-top 兜底，再用 @supports 判断是否支持 aspect-ratio 来覆盖。

一个容易踩的坑：百分比 padding 的参照

padding-top 的百分比是相对于父元素的宽度计算的，不是高度。很多人第一次写会以为它相对于自身宽度，结果算出来高度不对。记住这条，公式就不会错。

插下面视频另一个坑：容器内边距与描边

如果容器带内边距或描边，实际可用宽度会小于设定宽度，比例就会轻微失真。稳妥的做法是把内边距与描边加在最外层，让真正管比例的那一层保持「净宽」。1 像素的描边在 800 像素宽度下影响约 0.25%，肉眼看不出来，但在窄容器里（比如 200 像素宽）就会明显。

还有一点：如果视频本身带自己的控制条，控制条高度通常占容器高度的 8% 到 12%。容器比例算得再准，画面可视区域也会被控制条吃掉一点。做精细排版时，可以把这部分预留出来。

插下面视频清晰度与尺寸的换算：别只盯着分辨率数字

分辨率高不等于看起来清楚。真正决定观感的是像素密度——容器宽度对应多少有效像素。一个 1920×1080 的片源，放进 800 像素宽的容器里，横向被压缩到约 42%；放进 320 像素宽的容器里，压缩到约 17%。压缩本身不损失清晰度，但如果片源码率偏低，压缩后细节会先糊掉。

行业通行的一个参考口径是：网页内嵌视频的横向有效像素，通常建议不低于容器宽度的 1.5 倍。也就是说 800 像素宽的容器，片源横向至少 1200 像素比较稳妥；320 像素宽的容器，480 像素横向就够。这个倍数不是硬标准，但低于 1 倍时（片源比容器还小），放大就会明显发虚。

插下面视频同一比例下的三档清晰度

以 16:9 为例，常见的三档是 640×360、1280×720、1920×1080。在 800 像素宽的容器里，第一档横向只有 640 像素，低于容器宽度，会发虚；第二档刚好够用；第三档有富余，适合大屏或高倍缩放场景。竖屏 9:16 的对应三档通常是 360×640、720×1280、1080×1920，换算逻辑一样。

码率的影响同样明显。同样 1280×720，码率在 1.5 Mbps 与 4 Mbps 之间，画面细节差别很大，尤其是运动镜头与渐变背景。如果容器本身不大（宽度低于 500 像素），把码率从 4 Mbps 降到 2 Mbps，观感损失往往察觉不到，但加载时间能缩短不少。

需要说明的是，具体码率与分辨率的对应关系，各家编码器与片源差异不小，上面给的是常见区间，不是绝对标准。真正要确认，还是得看你自己片源的实际参数。

插下面视频在移动端的比例适配细节

移动端适配里，比例问题会被放大。桌面端看着正常的一个 16:9 容器，到了手机上高度只剩两百多像素，字幕、角标、进度条全都挤在一起。下面几个细节，是我们反复核对后觉得最值得注意的。

横竖屏切换时的比例响应

用户把手机横过来，可用宽度从约 375 像素变成约 667 像素，比例不变但容器实际尺寸变了。如果容器用了固定像素高度，横屏时会出现上下大片空白；用比例撑高的写法则能自动适应。所以移动端优先用比例撑高，而不是固定高度。

插下面视频全屏按钮与手势冲突

竖屏容器接近满宽时，用户从屏幕边缘滑动返回的手势，容易和视频控制条的区域重叠。经验做法是给容器左右各留 8 到 12 像素的安全边距，避免手势误触。

插下面视频自动播放与静音策略

移动端浏览器普遍要求静音才能自动播放。竖屏大容器一旦自动播放，首屏会被画面占满，阅读动线被打断。我们更推荐的做法是：竖屏容器默认显示封面图，用户点击后再播放；横屏 16:9 容器可以考虑静音自动播放，因为它占屏比例相对可控。

小屏下的比例降级

屏幕宽度低于 360 像素时，9:16 容器高度会超过 600 像素，几乎占满一屏。此时可以考虑降级为 3:4，或者干脆改成「封面图 + 点击展开」的形式，把比例问题交给全屏播放器去解决。

多视频同页时，比例要不要统一

一页里放两三个视频，比例要不要一致？我的建议是：同一板块内统一，跨板块可以不同。同一板块里比例不一致，视觉上会显得杂乱，读者会下意识觉得页面没打理过。跨板块则不必强求，因为不同板块承担不同功能。

举个例子：正文开头的引子视频用 16:9，中段的口播演示用 3:4 并排文字，结尾的案例合集用 1:1 卡片列表。这三种比例各自服务于自己的位置，整体反而更清晰。但如果开头两个视频一个是 16:9、一个是 21:9，读者会觉得别扭。

插下面视频高度差带来的排版抖动

多视频同页时，如果每个容器高度差异很大，页面滚动时视觉重心会不断跳。一个实用的做法是给同一板块的容器设定一个高度区间，比如都在 380 到 460 像素之间，让节奏保持稳定。

插下面视频加载顺序与比例的关系

比例大的容器通常占用更多带宽。首屏的容器建议用较小的比例（比如 16:9），把竖屏大容器放到首屏以下，并配合懒加载。这样首屏渲染更快，LCP 表现也更好。

还有一点：多视频同页时，建议只让一个视频有自动播放能力，其余都改成点击播放。否则多个视频同时加载，带宽和性能都会吃紧。