Bootstrap卡片嵌入视频需用响应式容器：Bootstrap 4用.embed-responsive包裹video/iframe，Bootstrap 5用aspect-ratio；视频应置于.card-body内独立容器中，禁用.card-img-top；须处理overflow、padding、iOS渲染及自动播放等细节。
卡片里放视频，.card-img-top 不是唯一选择
直接把 <video> 或 iframe 塞进 .card-body 会导致宽高失控、移动端拉伸变形。Bootstrap 4/5 都不推荐这么做。正确路径是用响应式容器包裹视频元素，再嵌入卡片。
关键点：视频容器必须带 .embed-responsive 类（Bootstrap 4）或使用 aspect-ratio + width: 100%（Bootstrap 5），否则无法随卡片缩放。
- Bootstrap 4：必须用
.embed-responsive .embed-responsive-16by9包裹<video>或<iframe>，且子元素需加.embed-responsive-item - Bootstrap 5：弃用
.embed-responsive，改用 CSSaspect-ratio: 16 / 9，同时确保父容器有width: 100%和height: auto - 如果视频来自第三方（如 YouTube），iframe 的
src必须含?rel=0&showinfo=0，否则在卡片内可能溢出或触发横幅遮挡
.card 嵌套视频时，.card-body 和 .card-img-top 的分工要清楚
.card-img-top 是为静态图设计的，强行塞 <video> 会丢失控制条、无法自动播放、且不响应点击事件。它只适合封面图。
真实场景中，视频应放在 .card-body 内部，但需额外包裹一层 div 控制尺寸和行为：
- 封面图用
.card-img-top，下方.card-body放标题、描述、以及一个独立的<div class="video-wrapper"> -
.video-wrapper要设position: relative，内部视频容器设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 若需静音自动播放（常见于信息流卡片），
<video>必须带muted autoplay loop属性，否则 Chrome/Firefox 会静音或阻断
Bootstrap 卡片用于视频展示的三大硬伤
不是不能用，而是得知道哪几处容易翻车：
- 默认
.card没有overflow: hidden，当视频宽高比异常或 JS 动态插入内容时，可能撑破卡片边界 —— 必须手动加overflow: hidden -
.card-body的padding是固定值（如 1.25rem），对小屏卡片会造成视频区域过窄；建议用px-0或自定义类覆盖 - 卡片阴影（
.shadow-sm等）在 iOS Safari 下与<video>叠加时可能出现渲染撕裂，临时解法是给卡片加transform: translateZ(0)
用 reactstrap 替代原生 Bootstrap 卡片处理视频更省事
如果你项目已用 React，reactstrap 的 <Media> + <Card> 组合比手写 Bootstrap HTML 更可控，尤其在响应式切换和状态管理上。
例如，用 <Media> 把视频区域和描述区逻辑分离，再套进 <Card>，可避免 .media-body 和 .card-body 的 padding 嵌套冲突：
<Card>
<CardBody>
<Media>
<Media left>
<div className="embed-responsive embed-responsive-16by9">
<video className="embed-responsive-item" muted autoplay loop></video>
</div>
</Media>
<Media body>
<h5>标题</h5>
<p>描述文本</p>
</Media>
</Media>
</CardBody>
</Card>
这种结构下，视频区域宽度由 <Media left> 的 flex 行为控制，不会被 .card-body 的 padding 挤压，也方便后续加播放控制组件。
真正麻烦的从来不是怎么放进去，而是视频加载失败时的 fallback、静音策略是否生效、以及 iOS 上 playsinline 是否漏加 —— 这些细节比卡片结构本身更容易让整块功能失效。
