HTML中如何实现固定比例的视频容器-html教程-PHP中文网

直接设 width/height 失效是因为 height 百分比依赖父容器有明确高度，而父容器通常无高度导致计算为0；应改用 padding-bottom（如16:9用56.25%）配合绝对定位，或现代浏览器用 aspect-ratio: 16 / 9 渐进增强。

html中如何实现固定比例的视频容器

为什么直接设 width/height 会失效浏览器对 `<video></video>` 元素的默认行为是“按内容尺寸渲染”，且不响应 `aspect-ratio`（旧版浏览器或某些 UA 样式下可能被忽略）。直接写 `width: 100%; height: 56.25%;` 没用，因为 `height` 百分比依赖父容器有明确高度——而父容器往往没有设定高度，导致计算结果为 0。

常见错误现象：视频拉伸、黑边错位、容器塌陷、全屏后比例丢失。

用 padding-bottom 实现宽高比锁定这是最兼容、最稳定的做法，利用块级元素的 `padding-bottom` 百分比始终相对于宽度计算这一特性。

操作步骤：

给容器设 position: relative
子元素 <video></video> 设 position: absolute; top: 0; left: 0; width: 100%; height: 100%
容器自身用 padding-bottom 模拟高度：16:9 → 56.25%，4:3 → 75%，1:1 → 100%

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

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

注意：object-fit 决定视频如何填满容器。用 contain 保比例不裁剪，用 cover 填满但可能裁边；移动端慎用 cover，容易切掉字幕或关键画面。

现代方案：直接用 aspect-ratio（但得看兼容性）`aspect-ratio` 是 CSS Level 4 新增属性，写法简洁：`aspect-ratio: 16 / 9`。

但它在 Safari ≤ 15.4、旧版 Android WebView 中不支持，且部分场景下与 max-width 或 flex 布局组合时表现异常。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

稳妥做法是渐进增强：

先写 aspect-ratio: 16 / 9
再加 padding-bottom 回退规则（CSS 后写的会覆盖前写的，但仅在不支持 aspect-ratio 的浏览器中生效）

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}
/* 不支持 aspect-ratio 的浏览器会走这里 */
@supports not (aspect-ratio: 1 / 1) {
  .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
  }
  .video-container > video {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
  }
}

全屏时比例为何又乱了`requestFullscreen()` 会让元素脱离当前布局流，原有 `padding-bottom` 或 `aspect-ratio` 失效，浏览器按原始视频帧尺寸或 viewport 尺寸拉伸。

解决方法只有两个：

监听 fullscreenchange 事件，在全屏状态下临时移除容器的 padding / aspect-ratio，改用 width: 100vw; height: 100vh; 并配合 object-fit
更简单的是：全屏时直接让 <video></video> 自己全屏（不包裹容器），用原生控件 —— 大多数用户其实就想要这个效果

真正难处理的是「伪全屏」：比如点击按钮让容器撑满视口但不调用 API。这时必须手动重置容器样式，并确保 video 的 object-fit 和父容器尺寸同步更新。