Bootstrap 5 内嵌视频响应式 Ratio16x9用法-Bootstrap教程-PHP中文网

.video加.ratio-16x9无效，因该类仅作用于父容器；正确结构为。

bootstrap 5 内嵌视频响应式 ratio16x9用法

直接给 <video></video> 标签加 .ratio-16x9 没用——它必须作用于**父容器**，且子元素需显式拉满宽高并配合定位。

因为 .ratio-16x9 是容器类，不是媒体元素修饰类。Bootstrap 5 的 .ratio 系列依赖伪元素（::before）撑高，只对块级父容器生效；<video></video> 是替换元素，默认尺寸优先级高于 CSS 比例声明。

常见错误：写成 <video class="ratio ratio-16x9"></video> → 视频溢出、高度塌陷或比例错乱
正确结构必须是：<div class="ratio ratio-16x9"><video></video></div>
<video></video> 必须设 class="w-100 h-100"（或等效 width: 100%; height: 100%），否则无法填满容器
若视频有原生 controls，底部控件会破坏高度计算，建议关闭或用自定义控件

是的，而且不能只靠 width: 100%。Bootstrap 的 .ratio 容器本身不设 position: relative，但其内部逻辑依赖子元素绝对定位（通过伪元素 + 绝对定位实现拉伸）。仅设宽高百分比不够，还必须确保子元素脱离文档流并覆盖整个区域。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

推荐写法：<video class="w-100 h-100 position-absolute top-0 start-0"></video>
如果不用 Bootstrap 工具类，等效 CSS 是：position: absolute; top: 0; left: 0; width: 100%; height: 100%
务必加 object-fit: cover（或 contain），否则视频可能拉伸变形或留黑边
旧版 Safari（iOS 14.5 之前）不支持 aspect-ratio，此时 fallback 的 padding-top 生效，若子元素没 position: absolute，内容会被顶出可视区

官方生成的 YouTube <iframe></iframe> 默认带 width="560" height="315"，这两个内联属性会强制覆盖 CSS 百分比，必须彻底删除。

删掉 width 和 height 属性（不是设为 auto，是移除整段）
确保 <iframe></iframe> 是 .ratio 容器的**直接子元素**，中间不能嵌套 <div> <li>加上 <code>allowfullscreen 和语义化 title（无障碍必需）
示例：<div class="ratio ratio-16x9"><iframe src="https://www.youtube.com/embed/xxx" title="YouTube video" allowfullscreen></iframe></div>
若用在 Tab 或 Modal 中，避免初始 display: none；可改用 visibility: hidden + position: absolute 保盒模型

Bootstrap 5 不提供 .ratio-9x16，但机制透明：它靠 --bs-aspect-ratio 变量控制伪元素的 padding-top 值，公式是 height / width × 100%。

9:16 → 16 / 9 × 100% ≈ 177.777778%
自定义类必须以 .ratio- 开头，且在 Bootstrap CSS 之后加载：.ratio-9x16 { --bs-aspect-ratio: 177.777778%; }
HTML 中用：<div class="ratio ratio-9x16"><video class="w-100 h-100 position-absolute top-0 start-0"></video></div>
别用 padding-top 直接覆盖伪元素，会和 Bootstrap 的 ::before 冲突
注意斜杠格式：变量值必须是 16/9 这种分数字符串（Bootstrap 5.3+），不能是小数或百分比