Aspect Ratio
This technique allows browsers to determine an element’s height based on the width of their containing block using aspect ratio
A common problem is to make a video responsive. Ecpecially if it’s served through an <iframe>. That is because an iframe needs defined attributes for width and height. Controlling the width can easily be done in CSS (iframe { width: 100%; }), but controlling the height is worse.
- DO Let the video respect viewport and maintain aspect ratio
- DON'T Let the video overflow the viewport on small screens
Ideally we don’t want the height to remain static if the width is dynamically changed by the viewport size. For video, commonly displayed in a 16:9 aspect ratio, we want the height to be exactly 56.25% of the width.
This can be calculated using the formula:
- ((height / width) * 100)
For a 16:9 video, this results in (9/16) x 100 = 56.25%.
- A video that is 1024px wide, should have a height of: 1024px x 56.25% = 576px.
- A video that is 675px wide, should have a height of: 675px x 56.25% = 380px.
By using the helper for kx-ratio, we can adjust this automatically without cumbersome calculations.
<div class="kx-ratio kx-ratio--16:9">
<iframe src="http://url-to-video" width="some-width" height="some-height"></iframe>
</div>
Try resizing your browser to see the height of the video change dynamically, while maintaining an aspect ratio of 16:9:
Available ratios
By default we provide a set of common ratios. These are applied as modifiers to the base class kx-ratio:
3:1
kx-ratio--3:1 Aka “Panorama”. Perfect for panorama photography due to its very wide format.
2:1
kx-ratio--2:1 Aka “Univisium” or “18:9”. It is designed to be a compromise between the cinema 2.39:1 aspect ratio and the HD-TV broadcast 16:9 ratio.
16:9
kx-ratio--16:9 the 16:9 format is the standard image aspect ratio for HDTV. 16:9 is gaining popularity as a format in all classes of consumer still cameras which also shoot High Definition (HD) video.
16:10
kx-ratio--16:10 Widescreen computer monitor ratio (for instance 1920×1200 resolution).
3:2
kx-ratio--3:2 is used by classic 35 mm film cameras.
4:3
kx-ratio--4:3 for standard television has been in use since the invention of moving picture cameras and many computer monitors used to employ the same aspect ratio.
1:1
kx-ratio--1:1 Classic square image. Originally the 6cm x 6cm image size format. Many Polaroid instant films were designed as square formats. Also made popular by Instagram.
Resources
- Aspect Ratio Calculator, WCAG 2.0 covers a wide range of recommendations for making Web content more accessible
- Aspect Ratio for images, Description of aspect ratio of still images, films, and digital imagery