Question

我想将我的YouTube视频放在同一行。我尝试调整iframe并创建一个包装器，但似乎我没有针对正确的事情。我不确定我哪里出错了。这是我的JFiddle：https://jsfiddle.net/6a73m27n/

.content {
  margin-top: 15px;
}

iframe {
  float: left;
}

<div class="video_wrapper">
  <iframe width="400" height="200" src="https://www.youtube.com/embed/3S_dmC2soik" frameborder="0" allowfullscreen></iframe>
  <iframe width="400" height="300" src="https://www.youtube.com/embed/bdGhmMzj4uE" frameborder="0" allowfullscreen></iframe>
</div>

Answer 1

只需提及视频的宽度百分比，如下所示：

<div class="video_wrapper">

<iframe width="40%" height="200" src="https://www.youtube.com/embed/3S_dmC2soik" frameborder="0" allowfullscreen></iframe>
<iframe width="40%" height="200" src="https://www.youtube.com/embed/bdGhmMzj4uE" frameborder="0" allowfullscreen></iframe>

Answer 2

如果你在一条线上有足够的宽度，它实际上是有效的。尽管如此，我建议你把这个样式放到iframe上：

iframe {
  display: inline-block;
  vertical-align: top; /* or middle, bottom, baseline by your preference */
}

如何将我的YouTube视频放在同一行？

2 个答案: