学习用HTML编辑网页制作一个带自适应比例的视频容器-html教程-PHP中文网

直接用标签会撑破容器，因其默认为行内替换元素，宽高不继承父容器比例；自适应核心是保持比例缩放，最可靠方案是用padding-top百分比（如16:9为56.25%）配合绝对定位实现。

学习用html编辑网页制作一个带自适应比例的视频容器

为什么直接用 `<video></video>` 标签会撑破容器

浏览器默认把 <video></video> 当作行内替换元素，宽高不继承父容器比例，设 width: 100% 后高度由视频原始宽高比决定，常导致上下溢出或留白。自适应的核心不是“填满”，而是“保持比例缩放”。

不能只靠 width: 100% + height: auto —— 它依赖视频自身 aspectRatio 属性（旧浏览器不支持）
不要用 vh/vmax 硬设高度 —— 屏幕尺寸变化时比例仍会断
真正可靠的方案是用 padding-top 百分比触发垂直方向的相对计算（CSS 中只有 padding/margin 的百分比值相对于父容器宽度）

用 `padding-top` 实现 16:9 自适应容器

这是最兼容、最可控的方式：用一个外层容器控制比例，再用绝对定位把 <video></video> 填满它。

<div class="video-container">
  <video controls><source src="demo.mp4" type="video/mp4"></source></video>
</div>

CSS 部分：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

.video-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 = 9 / 16 = 0.5625 */
}
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* 或 cover，按需选 */
}

padding-top 值必须是小数形式（如 56.25%），不能写成 56% 或 56.2%，否则 16:9 会轻微变形
object-fit: contain 保证完整显示且不裁剪；cover 适合全屏覆盖但可能切边
如果视频源本身带黑边（letterbox），object-fit: cover 可能放大黑边区域，此时改用 fill 更稳妥

响应式下如何切换不同宽高比（比如手机切 4:3）

单个容器无法自动识别设备并切换比例，得靠媒体查询手动控制 padding-top。

@media (max-width: 768px) {
  .video-container {
    padding-top: 75%; /* 4:3 = 3 / 4 = 0.75 */
  }
}

别试图用 JS 动态算 padding-top —— 触发重排，且移动端 resize 频繁，性能差
常见比例对应值：16:9 → 56.25%，4:3 → 75%，1:1 → 100%，21:9 → 42.857%
如果页面有多个视频容器，建议统一用 CSS 自定义属性（如 --aspect-ratio: 56.25%），方便维护

现代写法：用 `aspect-ratio` 但要注意兼容性

Chrome 88+、Firefox 89+、Safari 15.4+ 支持原生 aspect-ratio，写法极简：

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}
.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

IE 和 Safari 15.3 及更早版本完全不支持，上线前务必查 caniuse
即使支持，aspect-ratio 不影响子元素布局逻辑，video 仍需显式设 width/height 或用 object-fit
服务端渲染或 SSR 场景中，若首屏 JS 未加载完，aspect-ratio 容器可能短暂塌陷 —— 此时 fallback 到 padding-top 更稳

实际项目里，padding-top 方案仍是主力；aspect-ratio 可作为渐进增强加在后面，不破坏基础体验。