Html 不制作网格的可缩放视频

我有这些视频，我正试图放在一个网格中。每个视频将是25%，因此将有连续4个视频。这就是我得到的

.qtvideo {
    position:relative;
    float:left;
    padding-bottom:56.25%;
    padding-top:25px;
    height:0;
}
.qtvideo iframe {
    position: absolute;
    top:0;
    left:0;
    width:25%;
    height:25%;
}

然后是我的HTML

<div class="qtvideo">
<iframe width="960" height="720" src="//www.youtube.com/embed/link" frameborder="0" allowfullscreen></iframe>
</div>

<div class="qtvideo">
<iframe width="960" height="720" src="//www.youtube.com/embed/link" frameborder="0" allowfullscreen></iframe>
</div>

---

我不明白他们为什么不挨着睡。

就像你说的，你想得太多了。只需在

25%

宽度处放置4个div，然后在其中放置宽度和高度均为

100%

的iFrame。然后将div向左浮动。完成了

HTML:

---

我真的不明白你说的话，但你是这个意思吗@就像那样红润！哈哈，我想我只是想得太多了。哈哈，想让我把它作为一个答案吗？一个问题，视频似乎有点被压扁了。宽度在那里，但高度很奇怪。现在更改

div

高度，因为它控制iFrame的高度和宽度。Nm，只需添加一个“宽度”perimeter@jadeallencook很高兴我能帮忙！

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

iframe {
    width: 100%;
    height: 100%;
}
html, body {
    margin: 0;
}
div {
    float: left;
    width: 25%;
}