HTML怎么做响应式视频方案_html响应式视频嵌入方案方法【进阶】-html教程-PHP中文网

正确做法是给包裹容器设 aspect-ratio: 16/9 和 width: 100%，video 设 width: 100%; height: 100%; object-fit: cover/contain，并配 playsinline 等属性确保内联播放。

html怎么做响应式视频方案_html响应式视频嵌入方案方法【进阶】

只设 width: 100% 的 <video></video> 会塌高、变形、controls 被裁、移动端点不动——这不是 CSS 没写对，是没处理「宽高比约束」+「容器行为」+「播放策略」三者协同。

为什么 `width: 100%` + `height: auto` 还会出问题

因为 <video></video> 是替换元素，浏览器按原始分辨率计算固有尺寸。仅加 height: auto 时，若父容器没有明确宽高上下文（比如 div 无 width 或塌陷），高度可能算成 0；小屏下 controls 按像素渲染，缩放后按钮挤成一条线，甚至失焦无法点击。

父容器必须有可测量宽度（如 max-width: 100% 或 width: 100%），否则 width: 100% 无意义
height: auto 仅在视频原始比例与容器比例一致时才“看起来正常”，横屏视频放竖屏容器里必然黑边或裁切
iOS Safari 下，未设 playsinline 和 webkit-playsinline 时，controls 点击直接跳全屏，不是 bug，是强制策略

现代方案：用 `aspect-ratio` 控制容器，而非直接作用于 `<video></video>`

aspect-ratio: 16 / 9 是目前最干净的宽高比声明方式，但它必须写在**包裹容器**上，不能直接写在 <video></video> 标签上——否则老 Safari（≤15.3）会忽略，导致高度为 0，整个视频消失。

Wechat HTML Publisher

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

下载

推荐结构：<div class="video-container"><video></video></div>，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 规则

兼容旧版 Safari 的 padding-top 方案怎么写才不翻车

老 Safari（iOS 15.2 及更早）不支持 aspect-ratio，得用 padding-bottom + position: absolute 模拟比例。但直接抄“padding-top: 56.25%”容易错——它只适用于 16:9，且必须配合 height: 0 和绝对定位，漏一个就失效。

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

移动端自动播放和内联播放必须同时满足的硬性条件

iOS Safari 对自动播放拦截极严，autoplay + muted 只是入场券，缺了播放策略属性，play() 会抛 DOMException: play() failed because the user didn't interact with the document first.，视频卡在第一帧。

HTML 属性必须同时包含：autoplay muted playsinline webkit-playsinline
<meta name="viewport"> 必须存在且含 width=device-width，否则某些 iOS 版本双击触发缩放而非全屏
即使满足全部条件，iOS 仍禁止有声自动播放——muted 不可省，且用户首次交互（如点击）后才能调用 play() 解除静音
不要在 JS 中用 setTimeout(() => video.play(), 0) 绕过，Safari 会识别为非用户触发

真正难的不是写出能跑的代码，而是判断当前项目要兼容到哪一版 Safari、要不要支持竖屏视频、是否接受 JS 动态加载源文件——这些决策点会直接决定你用 aspect-ratio 还是 padding hack，用 object-fit: cover 还是 contain，以及要不要引入 <source></source> 的 media 查询逻辑。