在引导程序中将大小设置为响应式 iframe答案

【问题标题】：set size to responsive iframe in bootstrap在引导程序中将大小设置为响应式 iframe
【发布时间】：2014-12-09 17:24:04
【问题描述】：

是否可以在引导程序中将大小设置为内框？

我这样设置 iframe：

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

我尝试将最大高度设置为 450 像素：

.embed-responsive {
   max-height:450px;
}

这根本没有效果。您能否给我一个提示，如何实现更小但仍然响应的 iframe？

【问题讨论】：

您是否尝试过另外设置 iframe 的高度？ .embed-responsive iframe { height:100%; }.
这适用于 iframe 和嵌入视频：.embed-responsive, .embed-responsive iframe, .embed-responsive-16by9, .embed-responsive-item { max-width: 800px; max-height:450px; } 但周围的 div 保持 100% 的高度，所以我在 iframe 下方有一个巨大的空白区域。
我为整个事情设置了一个新的<div style="video-max-size">。它被定义为：.video-max-size { max-width: 800px; max-height:450px; } 这对我有用。

标签： css twitter-bootstrap iframe

【解决方案1】：

我遇到了同样的问题，并通过在 .embed-responsive div 周围添加一行和 col-sm-8（根据您想要的大小）来解决它。

<div class="row">
  <div class="col-sm-8">
    <div class="bs-example" data-example-id="responsive-embed-16by9-iframe-youtube">
      <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="" allowfullscreen=""></iframe>
      </div>
    </div>
  </div>
</div>

【讨论】：

这真是个好主意。我想我也可以在其他场合使用它。谢谢！
我是 Bootstrap 的新手，但行数不应该总是加起来 12 吗？
是的，尽管它在我在这里提供的示例中确实有效。为了在语义上更正确，您可以在 col-sm-8 结束后添加一个
。你可以查看 shoelace.io 来了解 cols 的行为。
它只会控制视频的宽度。身高呢？高度仍然很大且不成比例。
有一个错字，在class这里：<div class="bs-example" data-example-id="responsive-embed-16by9-iframe-youtube">

【解决方案2】：

在 Bootstrap 4 中使用 class='embed-responsive' 而不是 class='embed-responsive-item'。它应该工作得更好。 Source

【讨论】：

【解决方案3】：

您只需要添加它应该覆盖的列数。在这里，我定义为 4 列。（注意：Bootstrap 整个屏幕由 12 个单元格组成。）

<div class="bs-example col-sm-4" data-example-id="responsive-embed-16by9-iframe-youtube">
  <div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="" allowfullscreen=""></iframe>
  </div>
</div>

【讨论】：