[css-sizing] Aspect-ratio doesn't work on iframe videos unless the size attributes are removed

[jensimmons]

I just created a demo to show off how easy it is use aspect-ratio to make a YouTube video (or any iframe video) flexible, while still maintaining it's aspect ratio.

In the process, I realized it doesn't work.

By default YouTube (and others) put width and height attributes in the embed code. And the CSS property aspect-ratio doesn't override them— or something's going on with the interplay between iframe, attributes, and CSS.

If I remove the width and height attributes, then everything works as expected. But telling front end developers "hey we've got this new CSS for you, but you have to make sure you manually erase the width & height attributes from the embed code very time or else the layout will break" — that's not a good path. Getting YT & company to change their embed code is a possibility, but actually the width and height attributes should be there. Especially for fixed-width contexts. Also, we just switched image loading so that everyone should use width and height attributes for images... having this be different is not ideal.

Here's the test/demo:
https://codepen.io/jensimmons/pen/wvzXbNQ?editors=1100
Try it in any of the experimental implementations: Safari TP118+, FF Nightly, Edge/Chrome Canary. You might have to turn support for aspect-ratio on.

So what's happening? What can fix this?

@fantasai @emilio

[fantasai]

I think this is because the width and height attributes are mapped to the width and height CSS properties; you'll have to reset them to auto if you want them not to have a specified size.

[jensimmons]

Ah, yes, my mistake. I need height: auto;

Done.

[SebastianZ]

Though that's definitely something authors should be made aware of.

Sebastian