Maintaining Aspect Ratios for HTML Videos with CSS

When browsers render an <img>, they maintain the aspect ratio for the image. That is if the width is specified, then height will be automatically set maintaining the aspect ratio of the image. When the height is specified, then width is automatically set.

Unfortunately this does not work for the HTML5 <video> element. The browser needs both width and height properties to render the video properly. And width and height should obviously be such that the aspect ratio of the video is preserved.

When you know the screen size, then you can set height and width for the video. The problem comes up in maintaining responsiveness. Yes you can use @media queries to set height and width for different screen sizes, but that is mostly a pain with calculations involved and no guarantees for all screen sizes. An elegant solution — something based on percentages would be great.

This tutorial describes such a solution based purely on CSS.

Creating a Box of a Specified Aspect-Ratio

The solution to the problem sounds simple. If we need to show a video of 16:9 aspect ratio, we could create a parent <div> with aspect ratio of 16:9. A child <video> can be created whose height: 100%, width: 100% is set and our work could be done.

But how can we create a box whose height is in propotion to its width ?

Here comes the solution : Using padding as a percentage!

CSS Padding Property as a Percentage

When setting padding as a length (20px, 1.5em etc), it is fixed to the given value.

But when setting padding as a percentage, it is calculated on the width of the parent element.

For example consider the below markup and their CSS :

<div id="parent">
    <div id="child"></div>
</div>

#parent {
    width: 400px;
}

#child {
    padding-top: 50%;
}

In the above case the top padding of #child will be adjusted as 200px (50% of 400px).

All padding properties padding-top, padding-bottom, padding-left & padding-right follow this — they use the parent's width.

Creating a Box of a 16:9 Aspect-Ratio

16:9 aspect ratio means height is 9/16 times the width, which comes as 0.5625 or 56.25%.

Using this we create a parent container of 16:9 aspect ratio by setting padding-top: 56.25% and height: 0px. The child container which is a <video>, takes the full height and width of the parent.

Parent has position: relative and child has position: absolute so that the padding portion is hidden from the view.

Note that even though parent has height: 0px, yet it occupies a height because of the padding.

<div class="video-container">
 	<video class="video"></video>
</div>

.video-container {
    /* width is set as 100% here. any width can be specified as per requirement */
    width: 100%;
    padding-top: 56.25%;
    height: 0px;
    position: relative;
}

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

Creating a Box of a 4:3 Aspect-Ratio

4:3 aspect ratio means height is 3/4 times the width, which comes as 0.75 or 75%.

In this case padding-top: 75% should be specified. padding-bottom can also be used.

Demo : Youtube Video

HTML :

<div class="youtube-video-container">
    <iframe class="youtube-video" src="https://www.youtube.com/embed/8aGhZQkoFbQ"></iframe>
</div>

CSS :

.youtube-video-container {
    padding-top: 56.25%;
    height: 0px;
    position: relative;
}

.youtube-video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

Demo : Vimeo Video

HTML :

<div class="vimeo-video-container">
    <iframe class="vimeo-video" src="https://player.vimeo.com/video/285086929"></iframe>
</div>

CSS :

.vimeo-video-container {
    padding-top: 56.25%;
    height: 0px;
    position: relative;
}

.vimeo-video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}