title: How to put 2 embed YouTube iframes in a row?
body: <p>I have trouble positioning these 2 YouTube iframes side by side in a row.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.video-section {
    width: 100%;
    display: flex;
    position: relative;
    justify-content: center;
  }
  
  .videos {
    width: 40%;
    height: 300px;
    margin: 10px;
  }
  
  .videos iframe {
    position: relative;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="video-section"&gt;
    &lt;div class="videos first-video"&gt;
      &lt;iframe width="100%" height="100%" frameborder="0" src="https://www.youtube.com/embed/78bXV1ZqQWI"&gt;
        &lt;/div&gt;
  
        &lt;div class="videos second-video"&gt;
          &lt;iframe width="100%" height="100%" frameborder="0" src="https://www.youtube.com/embed/oAQxk9dOJ8k"&gt;
        &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Here it's showing only the first iframe and does not showing the second one:
  <img src="https://i.stack.imgur.com/soCb5.png" alt="image" /></p>
  <p>And when I remove the first iframe it shows like that:</p>
  <p><a href="https://i.stack.imgur.com/03O3l.png" rel="nofollow noreferrer">image</a></p>