Question

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

如何在容纳iframe的容器内允许任意数量的iframe并保持其宽高比？

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

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

以下是典型的YouTube嵌入代码的样子，具有固定的宽度和高度：

<iframe width="560" height="315" 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%;
}

Answer 1

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

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

如果有多个iframe，如何制作响应式iframe

1 个答案: