视频居中需用d-flex justify-content-center，垂直居中加align-items-center和min-height；响应式宽高比用ratio类（如ratio-16x9）配合w-100 h-100；避免width="100%"拉伸，改用object-fit；表单组内错位时改用row+col布局或input-group-text包裹。
Bootstrap表单里视频播放器默认左上角堆叠，怎么居中或对齐？
直接给 <video></video> 加 class="form-control" 没用——它只适配文本输入类元素，对 <video></video> 不生效，还会破坏宽高比。真正起作用的是 Bootstrap 的间距工具类和响应式容器封装。
- 优先用
<div class="d-flex justify-content-center"> 包一层，解决水平居中；垂直居中需额外加 <code>align-items-center和固定高度（如min-height: 200px） - 若要响应式等宽（比如和旁边的
<input>宽度一致），把<video></video>放进<div class="col"> 或 <code><div class="w-100">，再配合 <code>object-fit: contain防止拉伸变形 - 避免直接在
<video></video>上写width="100%"—— 这会强制拉宽但不维持宽高比，画面被压扁 - 写法必须是：外层
<div class="ratio ratio-16x9">，内层 <code><video class="w-100 h-100"></video> - 不要漏掉
h-100，否则视频只显示顶部一截 - 支持的预设有
ratio-1x1、ratio-4x3、ratio-16x9、ratio-21x9；自定义比例需手写 CSS 变量（如style="--bs-aspect-ratio: 40%;"） - 注意：该类仅作用于直接子元素，不能嵌套其他 div
- 绕过
input-group，改用<div class="row g-2"> + <code><div class="col-auto">（放标签）+ <code><div class="col">（放视频容器） <li>如果必须共用 <code>input-group结构，可在<video></video>外加<span class="input-group-text p-0 bg-transparent border-0"></span>，并手动设置line-height: 0和vertical-align: middle - Chrome/Firefox 对
input-group内非表单元素的渲染差异较大，务必在目标浏览器里实测 - 加
playsinline webkit-playsinline属性，阻止 iOS 强制全屏 - 移除
height固定值，改用max-height: 30vh配合object-fit: cover，避免小屏溢出 - 不要依赖
text-center对齐视频——它对块级<video></video>无效，得用 flex 或 margin: auto - Android Chrome 有时会忽略
ratio的 padding 计算，临时方案是加style="height: 0"到 ratio 容器上
用 Bootstrap 5 的 ratio 工具类控制视频宽高比
原生 <video></video> 没有 intrinsic ratio，浏览器无法自动按比例缩放。Bootstrap 5+ 提供了 ratio 类，本质是利用 padding-bottom 实现响应式容器占位。
表单控件组（input-group）里塞视频会错位，怎么办？
<div class="input-group"> 默认只兼容 <code><input>、<select></select>、<button></button> 等可交互控件，<video></video> 会被当成普通内联元素处理，导致行高塌陷、上下不对齐。
移动端视频对齐失效，常见原因和修复
不是代码写错了，而是移动浏览器对 video 的渲染策略不同：iOS Safari 默认禁用自动播放、强制全屏、且忽略部分 CSS 缩放指令。
