如何用HTML代码实现自适应高宽比的视频容器-html教程-PHP中文网

应为video父容器设置aspect-ratio: 16 / 9并设display: block，video自身不设宽高、不写html width/height属性，再配合width: 100%; height: 100%; object-fit: cover确保填满不变形。

如何用html代码实现自适应高宽比的视频容器

直接给 <video></video> 设 width="100%" height="100%" 是错的——它会强行拉伸，不保持比例。真正起作用的是容器（比如 <div>）的宽高比控制，<code><video></video> 只负责填满这个“比例框”。

现代项目首选 aspect-ratio: 16 / 9，一行 CSS 就够：.video-container { width: 100%; aspect-ratio: 16 / 9; }
旧版 Safari（.video-container { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; }
<video></video> 必须设为 position: absolute 或 display: block，否则 padding 方案下无法占满
别在 <video></video> 标签里写 width 或 height 属性，它们会覆盖 CSS

常见原因是 object-fit 没配对，或者父级有干扰样式。

object-fit: cover —— 填满容器，可能裁剪边缘（推荐用于背景视频）
object-fit: contain —— 完整显示，但四周可能留黑/灰边（适合教学类视频）
如果容器外层有 overflow: hidden，而 <video></video> 又用了 cover，裁剪就不可见——这是预期行为，不是 bug
检查是否误加了 max-height 或 min-width 等限制，它们会破坏 aspect-ratio 的计算逻辑

iOS Safari 对 <video></video> 全屏有硬性要求，漏一个都不行。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

必须同时存在：webkit-playsinline 和 playsinline
<meta name="viewport"> 必须启用缩放控制，例如：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
如果用了 controlslist="nodownload" 或 disablepictureinpicture，某些 iOS 版本会连带禁用全屏按钮
确保 <video></video> 是静态插入 DOM 的，不要用 JS 动态 append 后再加这些属性——iOS 可能不识别

单纯靠 width: 100%; height: 100% 不可靠，因为默认高度是 auto，没内容就塌陷。

先确保根级高度链完整：html, body { height: 100%; margin: 0; }
容器设 height: 100vh 最直接，但注意：iOS Safari 的 vh 在地址栏收起/展开时会跳变
更稳的方式是用 min-height: 100vh + aspect-ratio，既保最小高度，又维持比例
若需精确铺满且不滚动，加 position: fixed; top: 0; left: 0; width: 100%; height: 100%;，但要小心遮挡其他元素