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

【问题标题】：How to make flickr embedded video responsive while using Bootstrap?如何在使用 Bootstrap 时使 flickr 嵌入式视频响应？
【发布时间】：2015-12-17 20:23:10
【问题描述】：

我需要使嵌入的视频具有响应性。我尝试了解决方案introduced here，但没有成功。视频的宽度保持不变，不会缩小，使其在移动设备上看起来超出范围。如何使 flickr 视频具有响应性？

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

【问题讨论】：

标签： html css twitter-bootstrap video flickr

【解决方案1】：

<div class="flickr-embed-photo"> 有一个带宽度的内联样式。显然它是从它的窗口大小中获取的，而“窗口”是 iframe。 iframe 有一个带有高度和宽度的内联样式属性......你可以试试像

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

【讨论】：

【解决方案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>

【讨论】：