Question

尝试调整宽度/高度。 HTML有3个youtube视频和来自wiki的文章。全部通过iframe插入：

<div class="container"><iframe src="https://www.youtube.com/embed/v8ByVEM-e0g?rel=0" frameborder="0" allowfullscreen class="video" ></iframe><p><iframe  src="https://www.youtube.com/embed/XbbXJrVr8wI?rel=0" frameborder="0" allowfullscreen class="video"></iframe><p><iframe width="1024" height="576" src="https://www.youtube.com/embed/sYlKvR0j5fk?rel=0" frameborder="0" allowfullscreen></iframe><p><iframe width="1024px" height="10000px" src="https://ru.wikipedia.org/wiki/%D0%92%D0%BE%D0%B4%D0%BE%D1%80%D0%BE%D0%B4" /></p></div>

CSS：

#container {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
    }

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

结果看起来像是显示了第一个iframe，但占用了以下两个iframe的空间以及wiki iframe。请参阅screenshot。

我的容器页面非常流畅，需要适应用户设备。例如，尝试按H元素并查看iframe - chemistrytable.scienceontheweb.net/index_eng_svg.php

我得到它，这段代码适用于一个视频，但多个视频失败，因为所有视频都占据绝对位置并且相互支持？

Answer 1

首先，您已将类设置为容器，但在css中，您将其称为id，因此请更改它。将一些类添加到iframe并将其位置设置为relative。

以下是这个例子。

＆＃13;

.embed {
    height: auto;
    text-align: center;
}
.container {
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.container iframe, .container object, .container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

＆＃13;

<div class="embed">
    <div class="container">
    <iframe src="https://www.youtube.com/embed/v8ByVEM-e0g?rel=0" frameborder="0" allowfullscreen></iframe>
  </div>
</div>
<div class="embed">
    <div class="container">
    <iframe width="100%" height="500" src="https://www.youtube.com/embed/XbbXJrVr8wI?rel=0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>
<div class="embed">
     <div class="container">
     <iframe width="100%" height="500" src="https://www.youtube.com/embed/sYlKvR0j5fk?rel=0" frameborder="0" allowfullscreen></iframe>
     </div>
</div>
<div class="embed">
    <div class="container">
    <iframe width="100%" height="auto" src="https://ru.wikipedia.org/wiki/%D0%92%D0%BE%D0%B4%D0%BE%D1%80%D0%BE%D0%B4" />
    </div>
</div>

＆＃13;

Answer 2

＆＃13;

.embed {
    height: auto;
    text-align: center;
}
.container {
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.container iframe, .container object, .container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

＆＃13;

<div class="embed">
    <div class="container">
    <iframe src="https://www.youtube.com/embed/v8ByVEM-e0g?rel=0" frameborder="0" allowfullscreen></iframe>
  </div>
</div>
<div class="embed">
    <div class="container">
    <iframe width="100%" height="500" src="https://www.youtube.com/embed/XbbXJrVr8wI?rel=0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>
<div class="embed">
     <div class="container">
     <iframe width="100%" height="500" src="https://www.youtube.com/embed/sYlKvR0j5fk?rel=0" frameborder="0" allowfullscreen></iframe>
     </div>
</div>
<div class="embed">
    <div class="container">
    <iframe width="100%" height="auto" src="https://ru.wikipedia.org/wiki/%D0%92%D0%BE%D0%B4%D0%BE%D1%80%D0%BE%D0%B4" />
    </div>
</div>

＆＃13;

Answer 3

这必定是因为您已将IFrame设置为position:absolute而不是使用CSS类

.video {
  position: relative;
  width: 100%;
  height: 400px;
}

当你使用position：absolute;所有iframe都放在相对于父body标记的相同位置，因此您只能看到一个IFrame，相反，如果您使用position:relative，则IFrame将叠加在另一个之上。

希望这可以解决您的问题！

JSFiddle Demo

使iframe宽度/高度适应容器宽度，多个iframe

3 个答案: