[csswg-drafts] [css-sizing] Aspect-ratio doesn't work on iframe videos unless the size attributes are removed (#5844)

jensimmons has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-sizing] Aspect-ratio doesn't work on iframe videos unless the size attributes are removed ==
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 


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5844 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 7 January 2021 23:06:23 UTC