How to set this specific code into sections

Question

Im trying to embed a youtube live video window and live chat to appear next to eachother like they do on youtube live. Right now the chat appear below the video window, and im stuck with how to align this code:

.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>

Possible duplicate of [Two divs side by side - Fluid display](https://stackoverflow.com/questions/17217766/two-divs-side-by-side-fluid-display) — Heretic Monkey, May 07 '19 at 20:36

score 0 · Answer 1 · answered May 07 '19 at 20:33

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

According to your wording, I am guessing that you what the video and chat to be side-by-side.

The shortest solution personally I can come out of is using Flexbox while your HTML code remains the same.

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>

How to set this specific code into sections

1 Answers1