How to put 2 embed YouTube iframes in a row?-CodePudding

I have trouble positioning these 2 YouTube iframes side by side in a row.

.video-section {
  width: 100%;
  display: flex;
  position: relative;
  justify-content: center;
}

.videos {
  width: 40%;
  height: 300px;
  margin: 10px;
}

.videos iframe {
  position: relative;
}

<div >
  <div >
    <iframe width="100%" height="100%" frameborder="0" src="https://www.youtube.com/embed/78bXV1ZqQWI">
      </div>

      <div >
        <iframe width="100%" height="100%" frameborder="0" src="https://www.youtube.com/embed/oAQxk9dOJ8k">
      </div>
    </div>

Here it's showing only the first iframe and does not showing the second one:

And when I remove the first iframe it shows like that:

image

CodePudding user response：

Your iframe tags are missing their closing </iframe> tags. It seems to work fine once you add the closing tags.

Note that the actual YouTube videos don't show up in Stack Overflow code sandbox environment. I tested it in CodePen and confirmed that both videos show up.

.video-section{
    width: 100%;
    display: flex;
    position: relative;
    justify-content: center;
}

.videos{
    width: 40%;
    height: 300px;
    margin: 10px;
}

.videos iframe{
    position: relative;
}

   <div >
      <div >
        <iframe width="100%" height="100%" frameborder="0" src="https://www.youtube.com/embed/78bXV1ZqQWI"></iframe>
      </div>

      <div >
        <iframe width="100%" height="100%" frameborder="0" src="https://www.youtube.com/embed/oAQxk9dOJ8k"></iframe>
      </div>
    </div>

CodePudding user response：

You're missing the closing </iframe> tags.

 <div >
      <div >
        <iframe  height="100%"  frameborder="0" src="https://www.youtube.com/embed/78bXV1ZqQWI"></iframe>
      </div>

      <div >
        <iframe height="100%" frameborder="0" src="https://www.youtube.com/embed/oAQxk9dOJ8k"></iframe>
      </div>
    </div>