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="https://www.youtube.com/embed/2lAe1cqCOXo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 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

A little bit of HTML and CSS

HTML

<div class="videoWrapper">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/2lAe1cqCOXo" frameborder="0" 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