HTML响应式模板如何处理视频播放器尺寸-html教程-PHP中文网

应将 aspect-ratio 设在容器上并配合 object-fit，而非直接设 video 宽高；老 Safari 需用 padding-bottom 降级；autoplay 必须同时满足 muted、playsinline、webkit-playsinline 及 viewport 允许缩放。

html响应式模板如何处理视频播放器尺寸

直接给 <video></video> 写 width: 100% 不行，它会塌高、裁控件、移动端点不动——核心问题不在宽度，而在宽高比失控 + 播放策略被拦截。

为什么 `width: 100%` + `height: auto` 还是错的

因为 <video></video> 是替换元素，浏览器按原始分辨率计算固有尺寸。height: auto 只在容器比例匹配时“看起来正常”，一旦横屏视频放进竖屏容器，必然黑边或裁切；更糟的是，如果父容器没显式宽高（比如空 <div>），<code>width: 100% 根本无参照，视频可能消失或高度算成 0。

父容器必须有可测量宽度（如 max-width: 100% 或 width: 100%）
height: auto 对移动端原生 controls 不友好：小屏下按钮缩成一条线，甚至失焦无法点击
iOS Safari 未设 playsinline 时，点 controls 直接跳全屏，不是 bug，是强制策略

现代方案：用 `aspect-ratio` 控制容器，而非 video 自身

aspect-ratio: 16 / 9 必须写在包裹 <video></video> 的容器上（如 <div class="video-container">），不能直接写在 <code><video></video> 标签上——老 Safari（≤15.3）会忽略该声明，导致 <video></video> 高度为 0，整个视频不可见。

容器 CSS：.video-container { width: 100%; aspect-ratio: 16 / 9; }
<video></video> 本身设：width: 100%; height: 100%; object-fit: cover;（推荐，裁边不拉伸）或 contain（完整显示但留黑边）
必须配 @supports (aspect-ratio: 1/1) { } 做降级，旧浏览器进 fallback 规则

兼容老浏览器的 padding-bottom 方案

当需要支持 iOS 15.2 及更早版本 Safari 时，得回退到传统技巧。注意：padding-top: 56.25% 不是万能公式，它只适用于 16:9，且必须配合 height: 0 和绝对定位，漏一个就失效。

立即学习“前端免费学习笔记（深入）”；

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

容器设：position: relative; width: 100%; height: 0; padding-bottom: 56.25%;
<video></video> 设：position: absolute; top: 0; left: 0; width: 100%; height: 100%;
别给 <video></video> 加 margin 或 border，它们会破坏填满效果
如果用了 object-fit: contain，确保 poster 图像也适配该比例，否则首帧黑边位置错乱