html - 如何将此特定代码设置为多个部分

Question

我正在尝试嵌入一个 youtube 实时视频窗口和实时聊天，让它们像在 youtube 直播中一样出现在彼此旁边。现在聊天出现在视频窗口下方，我对如何对齐此代码感到困惑:

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

<div class='embed-container'>
  <iframe src='https://www.youtube.com/embed/VIDEOID' frameborder='0' allowfullscreen></iframe>
</div>

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

<div class='embed-container'>
  <iframe src='https://www.youtube.com/live_chat?v=VIDEOID&embed_domain=www.mydomain.com' frameborder='0' allowfullscreen></iframe>
</div>

Answer 1

Im trying to embed a youtube live video window and live chat to appear next to each other

根据你的措辞，我猜你想把视频和聊天放在一起。

就我个人而言，最短的解决方案是在 HTML 代码保持不变的情况下使用 Flexbox。

body{
  display: flex;
  flex-direction: row;
}
.embed-container{
  flex: 0 0 50%;

}
iframe{
  width: 100%;
}

<div class="embed-container">
  <iframe src='https://www.youtube.com/embed/VIDEOID' frameborder='0' allowfullscreen></iframe>
</div>
<div class='embed-container'>
  <iframe src='https://www.youtube.com/live_chat?v=VIDEOID&embed_domain=www.mydomain.com' frameborder='0' allowfullscreen></iframe>
</div>