当有多个 iframe 时如何制作响应式 iframe

Posted 2023-05-09

【中文标题】当有多个 iframe 时如何制作响应式 iframe

【英文标题】：How to make responsive iframe when there are multiple iframes

【发布时间】：2018-01-01 02:55:04

【问题描述】：

这很好用，直到我在同一个容器中有 2 个或更多 iframe，然后它们才会相互重叠，因为它们都具有相同的绝对位置。

如何在为容纳 iframe 并保持其纵横比而构建的容器内允许任意数量的 iframe？

---

发件人：https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed

创建响应式 YouTube 嵌入的关键是使用填充和容器元素，它允许您为其提供固定的纵横比。您还可以将此技术用于大多数其他基于 iframe 的嵌入，例如幻灯片。

这是典型的 YouTube 嵌入代码的外观，具有固定的宽度和高度：

<iframe   src="//www.youtube.com/embed/yCOY82UdFrw" 
frameborder="0" allowfullscreen></iframe>

如果我们可以给它一个 100% 的宽度，那就太好了，但它不会工作，因为高度保持固定。您需要做的就是将它包装在这样的容器中（注意类名并删除宽度和高度）：

<div class="container">
<iframe src="//www.youtube.com/embed/yCOY82UdFrw" 
frameborder="0" allowfullscreen class="video"></iframe>
</div>

并使用以下 CSS：

.container 
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;

.video 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

【问题讨论】：

纵横比会很棘手，表格可能会起作用吗？

您是否建议将每个 iframe 放入一个表格中？

我正在使用的 html 是用户输入，这是来自富文本编辑器的输出，我允许用户在其中输入可能包含 iframe 的任意 html（我做了一些清理以避免恶意代码)。

【参考方案1】：

不要将 2 个视频放在同一个容器中。放入 2 个容器并将它们包裹在一个包装纸中。然后将宽度和底部填充更改为您想要的任何内容。

.container 
    position: relative;
    width: 50%;
    height: 0;
    padding-bottom: 28.13%;
    display:inline-block;
    margin:0;

.video 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

<div class="wrapper">
  <div class="container">
    <iframe src="//www.youtube.com/embed/3Sdes6QuPro" frameborder="0" class="video"></iframe>
  </div><div class="container">
    <iframe src="//www.youtube.com/embed/yCOY82UdFrw" frameborder="0" class="video"></iframe>
  </div>
</div>

【讨论】：

这似乎不适用于任意数量的帧

不清楚你的意思是什么。当有 10 帧而只有 1 帧时，您希望有多少列？你想要它们并排还是只是列。更清楚。