bootstrap 5响应式iframe保持16-9比例

Question

我读过很多帖子，并尝试了一切使 iframe 响应并保持 16-9 比例...这还不错，但视频仍然在 YouTube 框架中被裁剪。

Bootstrap 5 有什么技巧？

<div class="embed-responsive embed-responsive-16by9" style="width:800px; height:450px">
      <iframe class="embed-responsive" title="YouTube video player" src="{{ $image['image']['url'] }}" frameborder="0" allowfullscreen="" width="100%" height="100%"></iframe>
</div> 

Answer 1

遇到了同样的问题，引导网站上的文档是这样说的：

<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" title="YouTube video player" src="https://www.youtube.com/watch?v=jNQXAC9IVRw" allowfullscreen=""></iframe>
</div>

但这不起作用，高度被忽略了。

我在 MD Bootstrap 文档上找到了解决方案：

<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/vlDzYIIOYmM" title="YouTube video" allowfullscreen></iframe>
</div>

MD Bootstrap：嵌入

如果添加高度和宽度，那么在 BS5 上非常适合我

<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/vlDzYIIOYmM" title="YouTube video" style="max-width: 100%;height: 100%;" allowfullscreen></iframe>
</div>

此信息也可以在 bootstrap 5 文档中找到：

• https://getbootstrap.com/docs/5.0/helpers/ratio/
• https://getbootstrap.com/docs/5.0/migration/

Answer 2

这个解决方案是 Bootstrap 5 中唯一有效的：

<div class="col-12 col-md-8 offset-md-2 col-lg-8 offset-lg-2">
      <div class="ratio ratio-16x9 text-center mt-4 mb-4 ">
      <iframe class="embed-responsive-item"  src="https://www.youtube.com/embed/DTpvdyzxQWE?controls=0" style="max-width: 100%;height: 100%;" allowfullscreen></iframe>
    </div>
    </div>

Answer 3

这个版本应该可以工作。

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" title="YouTube video player" src="https://www.youtube.com/watch?v=jNQXAC9IVRw" allowfullscreen=""></iframe>
</div>