Support responsive iframes that maintain aspect ratio

There are CSS-only ways to achieve this, which I would prefer to a JS approach.

See https://www.benmarshall.me/responsive-iframes/ and https://css-tricks.com/responsive-iframes/

So I'd suggest we either:

1. Use the existing width and height fields, and if the user enters a unitless value, use that as the aspect ratio, rather than assuming they mean px
2. Add an extra field to control the aspect ratio

Option 1 feels cleaner to me, but we would need to consider backwards compatibility - perhaps an update hook to convert existing unitless values to px values?

Thanks for picking this up @malcomio. In order to pull arbitrary aspect ratios from width/height, according to the docs you linked to, we would need to use the var(--aspect-ratio) solution to pass the local value from the iframe's inline style attribute into some standard CSS shipped with the module. This feels a bit hacky.

At the same time, I just found something from the author of the gist I pointed to above:

to be completely honest, I would probably just use CSS's new aspect-ratio to do this nowadays. Avoid the padding-bottom hack.

I was unaware of aspect-ratio until today, but this does seem to be like a better approach, and could be implemented in an inline style attribute, without the need of passing var(--aspect-ratio) dynamic css variable around.

Support seems pretty stable at this point:
https://caniuse.com/mdn-css_properties_aspect-ratio

Thoughts?

Merge request !11 should now be ready to review, although it does not include any update hook to convert existing values.

neffets → closed merge request !11

Should this be closed as something was committed?

Automatically closed - issue fixed for 2 weeks with no activity.