在Bootstrap中设置响应式iframe的大小

Question

在Bootstrap中是否可以设置iframe的大小？

我是这样设置iframe的：

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

我尝试使用以下代码将最大高度设置为450像素：

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

这没有任何影响。你能给我一些提示，如何实现一个更小但仍然具有响应性的iframe呢？

- Dominik Stürzer

---

你尝试过设置iframe的高度吗？.embed-responsive iframe { height:100%; }。 - Marcelo

这段代码对于 iframe 和嵌入式视频都有效：.embed-responsive, .embed-responsive iframe, .embed-responsive-16by9, .embed-responsive-item { max-width: 800px; max-height:450px; }但是周围的 div 保持了100%的高度，所以在 iframe 下面有一个巨大的空白区域。 - Dominik Stürzer

我在整个元素周围设置了一个新的<div style="video-max-size">。它被定义为：.video-max-size { max-width: 800px; max-height:450px; } 对我来说，这就是解决方法。 - Dominik Stürzer

Answer 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>

- Lxske

---

这真是个好主意。我觉得我以后也可以在其他场合使用它。 - Dominik Stürzer

我对Bootstrap还不熟悉，但是行不是总和应该为12吗？ - Kyle Hawk

是的，尽管它在我提供的示例中有效。为了更语义化正确，您应该在 col-sm-8 的关闭标签后添加 <div class="col-sm-4">。您可以查看 shoelace.io 以了解 cols 的行为。 - Lxske

它只会控制视频的宽度。那高度呢？高度将保持大而不成比例。 - Hassan Dad Khan

这里的 class 出现了拼写错误：<div class="bs-example" data-example-id="responsive-embed-16by9-iframe-youtube">。 - candlejack

Answer 2

在Bootstrap 4中，使用 class='embed-responsive' 代替 class='embed-responsive-item'。 这样应该会更好地工作。来源

- KeyC0de

Answer 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>

- ladybird