如何在使用Bootstrap时使flickr嵌入式视频响应？

Question

我需要让嵌入式视频响应。我尝试了解决方案introduced here但没有成功。视频的宽度保持不变，不会向下缩小，使其在移动设备上看起来不受限制。如何使flickr视频响应？

由于Chrome无法在iframe中复制源代码，因此屏幕截图如下：

Answer 1

<div class="flickr-embed-photo">具有宽度的内联样式，显然它从窗口大小开始，“窗口”是iframe。 iframe有一个高度和宽度的内联样式属性......你能尝试像

这样的东西

iframe {
  height: auto !important;
  width: 100% !important;
}

Answer 2

如果使用最新的 Bootstrap 4.6，您可以使用 Embeds utility 中的类。像下面这样的东西应该可以工作，但您可能需要为您的嵌入比例选择合适的类并删除 flickr-embed-frame，因为 flickr-embed JS 可能会在那里放置内联代码。

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://your-flickr-embed-url" ></iframe>
</div>