Background
Prior to 2021, I accomplished it through JavaScript, using getComputedStyle combined with window resize event listener to (re)define the height of an iframe.
But now, we have aspect-ratio.
Hm...
Be gone all that hassle! 🪄✨
Here's how we sort it with CSS.
Example Implementation
For example, we want to make the embedded iframe from YouTube to be responsive — having 100% (or other percentage) of width of the container and let the height automatically follows the ratio.
We shall use 16:9 ratio for this example.
The YouTube embed code is usually as such:
We can omit the height, width, and frameborder from that, then add class for the iframe. Let's use YT_EMBED as the class of the iframe.
For clarity, I'll make the attributes to have new lines:
Then we define the CSS rules for the .YT_EMBED.
Put all together, it will look like this:
That'll do it. It will automatically be in 16:9 ratio.
Quite.
Demonstration
This is an example of an iframe embedding another iframe.
Kaval Sviri
Kaval is a end-blown flute — a long, open, rather melancholic sounding instrument, deeply embedded in Bulgarian and broader Balkan folk tradition.
Sviri = "plays" or "is playing".
Kaval sviri = "the kaval plays" — the kaval being the it doing the playing. No, it's not an autonomous flute plays itself. It's simply how the Bulgarian phrases it. Unlike, say, cereal-box English. "Ooh subject, ooh predicate." Yeah? And why are "beside" and "besides" like that?
Anyway, as a folk song/piece it typically evokes shepherds. Almost always shepherds. A lone shepherd on a hillside, playing his kaval across the valleys — which is precisely the instrument's natural habitat. The kaval was the shepherd's companion, played during long solitary hours with the flock. The mood is characteristically Bulgarian folk — which is to say beautiful but carrying a certain ache to it.
Comments
Post a Comment