这很好用,直到我在同一个容器中有 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%;
}
最佳答案
不要将 2 个视频放在同一个容器中。放入 2 个容器并将它们包裹在一个 wrapper 中。然后将宽度和底部填充更改为您想要的任何值。
.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>
关于html - 有多个iframe时如何制作响应式iframe,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45315862/