title: Embed youtube video height issue
body: <p>I'm trying to embed a youtube video into my project, it works and I also tried to apply a 16:9 ratio with <code>padding-bottom: 56.25%</code> like as most tutorials out there.</p>
  
  <p>The issue is, the height of video is happened to be 100% of the container, What should I fix in my CSS to get rid of the top/bottom blackbar?</p>
  
  <p>Here's my code pen attemp: <a href="https://codepen.io/DieByMacro/pen/QXmJez" rel="nofollow noreferrer">https://codepen.io/DieByMacro/pen/QXmJez</a></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>.HomePage-homeVideoWrapper-274 {
    height: 0;
    margin: auto;
    z-index: 1;
    position: relative;
    max-width: 720px;
    padding-top: 25px;
    padding-bottom: 56.25%;
  }
  .HomePage-homeVideoWrapper-274 iframe {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    position: absolute;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="HomePage-homeVideoWrapper-274"&gt;
    &lt;iframe height="auto" src="https://www.youtube.com/embed/Qjmp2r2OsZ4" title="Home-admin tutorial" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"&gt;&lt;/iframe&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>