How to fill container with video delivered via iframe

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.

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.