[csswg-drafts] [css-sizing] Where does the default aspect-ratio of a <video> come from? (#12053)

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

== [css-sizing] Where does the default aspect-ratio of a <video> come from? ==
This issue is a little subtle, and there are related connected issues, but this is just focused on when/where does the 2:1 aspect-ratio of an unloaded `<video>` come from?

See the rendering of:
```
<!DOCTYPE html>
<video style="width: 100px;"></video>
```

Above in all browsers will render as `100x50`.
https://wpt.live/css/css-sizing/intrinsic-size-fallback-video.html asserts this behaviour.

In html: https://html.spec.whatwg.org/#the-video-element
> The [default object size](https://drafts.csswg.org/css-images/#default-object-size) is a width of 300 [CSS pixels](https://drafts.csswg.org/css-values/#px) and a height of 150 [CSS pixels](https://drafts.csswg.org/css-values/#px). [[CSSIMAGES]](https://html.spec.whatwg.org/#refsCSSIMAGES)

This is the same for other replaced elements - however having a size, _doesn't_ imply having an aspect-ratio.

In https://github.com/w3c/csswg-drafts/issues/7524#issuecomment-1204462924 we discussed that `aspect-ratio:auto` doesn't pull from the default object size. The above testcase clearly has an aspect-ratio, and `aspect-ratio` is `auto`, but then where does the 2:1 aspect-ratio for `<video>` come from?

A simple testcase with `<iframe>` & `<svg>` for comparison (both who also have a `300x150` default size).
https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=13638

Given the resolution in https://github.com/w3c/csswg-drafts/issues/7524 there are 3 potential solutions for this behaviour:

1. The `<video>` element *shouldn't* have a 2:1 aspect ratio by default, and instead behave like its replaced friends. This has the largest potential web-compat issue, but might be fine given most videos are either sized of have 100% width/height, or explicitly sized.
2. The `<video>` element should have a UA stylesheet rule of `video { aspect-ratio: 2 auto; }`. This would likely be the most web-compatible, and easily explains the behaviour of current browsers.
3. A step in the "normalization" step of natural-sizes where *if* we are a video with no aspect-ratio, we always get a aspect-ratio of 2:1. This is the icky, and isn't easily explainable. Can potentially produce undesirable behaviour in certain circumstances.

I like either option 1 or 2.


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


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

Received on Sunday, 6 April 2025 03:43:39 UTC