video标签不能直接加img-fluid类，因其专为img设计，依赖max-width:100%和height:auto；而video有固有宽高比且不响应式，强行使用会导致拉伸或裁剪；正确做法是用Bootstrap的ratio（v5）或embed-responsive（v4）容器包裹，并确保video无固定宽高、poster比例匹配、配合object-fit控制显示效果。
video 标签直接加 class="img-fluid" 为什么不管用
因为 img-fluid 是为 <img> 设计的，它依赖 max-width: 100% 和 height: auto，但 <video></video> 默认有固有宽高比且不响应式。强行套用只会让视频被拉伸或裁剪，不会保持比例。
正确做法：用 Bootstrap 内置的 embed-responsive 容器
Bootstrap 4/5 都提供了 embed-responsive（v4）或 ratio（v5）类来包裹媒体元素，靠 padding-top 百分比实现等比缩放。关键不是给 <video></video> 加 class，而是把它放进一个带比例控制的容器里。
实操建议：
- Bootstrap 4：用
<div class="embed-responsive embed-responsive-16by9"><video class="embed-responsive-item"></video></div> - Bootstrap 5：改用
<div class="ratio ratio-16x9"><video></video></div>，video不需要额外 class - 确保
video标签没有写死width或height属性（比如width="640"），否则会破坏响应式行为 - 如果用 poster 图，也要确保它本身是响应式的——不要设固定尺寸
自定义宽高比（比如 4:3 或竖屏 9:16）
Bootstrap 内置只提供 16x9、4x3、21x9 等常见比例，但你可以轻松扩展：
Bootstrap 5 示例（CSS 自定义）：
.ratio-4x3 {
--aspect-ratio: 4 / 3;
}
然后直接用：<div class="ratio ratio-4x3"><video></video></div>
注意点：
- v4 的
embed-responsive-4by3是内置的；v5 要么用 CSS 变量，要么手写padding-top: 75%（即 3/4） - 移动端竖屏视频（如 TikTok 风格）可用
--aspect-ratio: 9 / 16，对应padding-top: 177.777% - 别用
height: 0; padding-bottom混搭写法——Bootstrap v5 已统一用--aspect-ratio，兼容性更好
遇到 poster 不居中或黑边怎么办
这是最常被忽略的一环：poster 图片尺寸和 video 容器比例不一致时，浏览器默认按 object-fit: fill 渲染，导致拉伸或留黑边。
解决方式很简单：
- 给
video加样式：style="object-fit: cover;"（填满容器，可能裁剪）或object-fit: contain;（完整显示，可能留黑边） - 确保 poster 图像分辨率符合目标比例（比如 16:9 视频就用 1280×720 或 1920×1080 的 poster）
- 如果用
controls，注意某些安卓 WebView 下 controls 会遮挡 poster —— 可先隐藏 controls，等播放后 show
真正麻烦的从来不是加个 class，而是 poster、video 元素、容器三者比例对齐，以及 object-fit 在各端的渲染差异。
