在引导程序中具有响应式嵌入式 iframe 的最大宽度答案

【问题标题】：max-width with responsive embedded iframe in bootstrap在引导程序中具有响应式嵌入式 iframe 的最大宽度
【发布时间】：2023-04-08 08:41:01
【问题描述】：

我正在使用embed-responsive-16by9 在基于列的引导布局中改变一些嵌入视频的大小：

    <div class="row">
        <div class="col-md-6">
            <div class="embed-responsive embed-responsive-16by9 concept-video">
                <iframe src="" width="476" height="268" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            </div>
        </div>
        <div class="col-md-6">
            <div class="embed-responsive embed-responsive-16by9 concept-video">
                <iframe src="" width="476" height="268" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            </div>
        </div>
    </div>

当屏幕较小时，列堆叠而不是彼此相邻（应该如此），此时视频变得比我需要的宽，所以我使用 css 设置最大宽度div：

.concept-video {
    max-width: 476px;
}

这正在设置最大宽度，但视频的高度仍然与没有最大宽度时的高度相同，因此它们在 iframe 的上方和下方都有黑色空间。如何使视频的高度相对于宽度正确？

我尝试将max-height 设置为max-width 的正确高度，但这没有效果：

.concept-video {
    max-width: 476px;
    max-height: 268px; !important
}

【问题讨论】：

标签： twitter-bootstrap iframe

【解决方案1】：

尝试删除您的自定义 CSS，例如 concept-video，然后尝试下面的代码。

<div class="col-md-6">
 <div class="embed-responsive embed-responsive-16by9">
   <iframe class="embed-responsive-item" src="//www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>
 </div>
</div

如果您想在移动设备中看到彼此相邻的 div，那么将您的 div 类更改为 <div class="col-xs-6">

【讨论】：

这只是回到嵌入响应的标准行为。我想在视频上设置最大宽度，而高度不会出现异常（列行为很好）
你能给我们看一张你真正要找的截图吗？