Aspect ratio, CSS only

Videos are the mainstream media format on the Web. As social networks and technologies have evolved, video has increasingly become part of the user experience. Some are exclusively based on video, others not so much.

The fact is that video is not a medium that adapts to any screen, like responsive pages, but fixed in their proportions. In order to have a "responsive" video it would be necessary to create many versions in different resolutions, which, depending on the video and the costs, would not be worth it.

Therefore, the least you can do is try to obey the aspect ratio of the video, without affecting the layout. In JavaScript there are libraries to deal with this, however, if you already know my style, I prefer to use CSS whenever it is possible to obtain results like this. At the moment, there is still no "official" way to apply proportions to a CSS element.

And the "aspect-ratio" rule?

When I said that there is no "official" way, it is precisely because the aspect-ratio rule is still, on the date of publication of this article, in an experimental phase and its use for production sites is not recommended.

However, its use as soon as it is supported in all browsers is quite simple, just mentioning the desired proportion in the value, without unnecessary calculations.

.element {
  width: 100%;
  aspect-ratio: 16 / 9;
}

In this case, the height will be calculated automatically by the proportion. If height and width are given, the aspect-ratio rule will be promptly ignored. It would be great if it already worked, but it is not yet the case. We will have to use the famous hacks to achieve the same effect.

How to do it?

The hack is basically this: make an element with relative positioning, which has a width, and a lower or upper inner margin (padding-bottom / padding-top) with a percentage value that will give proportional height. This percentage is the number that will do the job for us. For each desired ratio there is a magic padding number.

If you want to know what some of them are, see below:

Square video (Instagram / Facebook): 100%
SD video aspect ratio (4:3): 75%
HD video aspect ratio (16:9): 56.25%
Anamorphic videos: 41.9%

After that, just place a child element with an absolute position, occupying the entire area of the parent element. Adding this to the CSS code, we will have the following:

.widescreen {
  position: relative;
  padding-bottom: 56.25%;
  width: 100%;
}

.widescreen iframe {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
}

Okay, if you came here just to copy a code to put a video in a 16:9 ratio, I believe you are already satisfied. But if you want to learn how to do this with any proportion, continue here.

How these numbers were found?

Using math, we know that 4:3 or 16: 9 are just fractions, and that it is enough to solve them and convert them into percentages to obtain the value of the inner margin. To make it easier to understand, see the example below:

.widescreen {
  position: relative;
  padding-bottom: calc(90px / 160px * 100%); /* = 56.25% */
  width: 100%;
}

This calc() function of the CSS will result in the same percentage (56.25%) that we put earlier, however the calculation will be interpreted in the browser when the CSS is loaded.

With Sass, there is no need to use the calc() function, just write the direct calculation. When compiling, the final CSS will only show the resulting percentage.

.widescreen {
  position: relative;
  padding-bottom: 90px / 160px * 100%; // 56.25%
  width: 100%;
}

Therefore, the basic formula is as follows:

aspect-ratio = height / width * 100%

Having the values of height and width of the element is enough to achieve the effect.

I hope you liked the tip! See you the next time!

dois:pontos