Site icon Puneet Sharma – Freelance Web Developer

How to maintain aspect ration of YouTube videos with CSS

Responsive YouTube

Responsive YouTube

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.

Exit mobile version