How to deal with video that is delivered via iframe so it 100% fills it's container

There are lots of ways to display video on your website. One of them is using <iframe> to embed media such as YouTube, Vimeo or any other video provider that provides <iframe> code to display relevant video.

This method normally works well but video embedded via <iframe> has normally set static width and height which is not very good for responsive design.

  <iframe width="560" height="315" src="..." frameborder="0" allowfullscreen></iframe>

But what if the container <div> holding the video shrinks less than video width of 560px set in <iframe>, will it looks good? No, it won’t.

The solution is right below. I used this trick so many times on different projects with different media providers and it always works well.

Demo

HTML

  <div class="videoWrapper">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/2lAe1cqCOXo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>

CSS

  .videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
  }

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

I hope this little snippet of code helps you and your user to see embedded video on your websites without any issues.

Happy coding