How to maintain aspect ration of YouTube videos with CSS

Hey, you can create responsive YouTube videos with the help of CSS only and maintain its aspect ratio without needing any third-party JavaScript library. The easiest and quickest way to do it is with the following CSS.

HTML

<div class="container">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/KN1UPMXocyc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>

CSS

.container {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25% // 9 / 16 * 100%
  }

  .container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

DEMO

See the Pen Untitled by Puneet Sharma (@webdevpuneet) on CodePen.