TIL aspect ratios

POSTED ON: Dec 24, 2022

I didn't even consider about resizing a iframe to fit.

We can target iframe elements directly with a few lines of CSS to preserve their dimensions in responsive layouts, without the need for a wrapper element.

Set the height and width of the iframe to 100%. Then assign an aspect-ratio property with a value of width / height. For ourHD videos, we’d use 16 / 9.


<style>
iframe {
	aspect-ratio: 16 / 9;
	height: 100%;
	width: 100%;
}
</style>

<iframe src="https://player.vimeo.com/video/28523422?h=7755bc3e5f" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

via Responsive iframes with the CSS aspect-ratio property

Related TILs

Tagged: css

TIL the alternate keyword

If 'alternate' appears along with the stylesheet keyword, the linked file is an alternative stylesheet. It won’t be applied to the document, but it will be ready for when we need it.

Mar 18, 2023

TIL Logical Properties

For that sweet sweet Internationalization you want to avoid directional words like 'left', 'right', 'top', and 'bottom'.

Mar 11, 2023

TIL Using pseudo-classes in your querySelector!

let notTuna = document.querySelectorAll('.sandwich:not(.tuna)')

Mar 02, 2023