时间戳

首页 > 解决方案 > bootstrap 5 响应式 iframe 保持 16-9 的比例

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

问题描述

我已经阅读了很多帖子并尝试了一切以使 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>

标签： iframebootstrap-4responsive-images

解决方案

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

<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 文档中找到：

推荐阅读