Как установить этот конкретный код в разделы

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

Я пытаюсь встроить окно живого видео на YouTube и чат, чтобы появиться рядом друг с другом

В соответствии с вашей формулировкой, я предполагаю, что вы, что видео и чат, должны быть рядом.

Самым коротким решением, которое я могу предложить, является использование Flexbox, в то время как ваш HTML-код остается прежним.

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>