Square video in wide player: Neither poster nor video is contained in height with blacks on sides

[ADTC]

It looks like the <video> element inside the shadow DOM overflows the <media-controller> in light DOM in height. A percentage height has no effect whatsoever. You can see that height: 100% is already set, but even if I change to 10%, nothing happens.

Only fixed pixel values like 403px or something like 10vh works, as you can see in second picture below. I already read the issue #206 but it doesn't seem to have the info I need. Although it does state the following:

Currently, you need to set the property via javascript on the video element in the shadow DOM once the media chrome element exists.

It appears that for me too, the fix for this issue would be JavaScript based which in my opinion is a hack (workaround).

Au contraire, a proper solution would be one that would work automatically by CSS alone, without any manipulations by JavaScript.

Regarding the poster image, if I have an <img slot="poster">, I also have to set height: 100% and object-fit: contain on it. This is still tolerable since it's automatic and doesn't need fixed pixel values.

Note: I am using Cloudflare plugin, so IDK if it's related to the plugin or the main MediaController. Actually it's just a plain video tag, but using HLS.js for HLS support.

[ADTC]

Ah, it looks setting aspect-ratio would be a cleaner solution that doesn't involve JavaScript, only CSS. We only need to be sure it has the correct aspect-ratio which would be easier to determine on fixed aspect-ratio video players. But it may still need some JS manipulations for video players that are responsive to viewport dimension changes.

PS: Since this is in shadow DOM, it may still require Javascript to set the aspect-ratio CSS inside the shadow DOM. It would be nice if media-chrome itself will compute and set the aspect-ratio internally so that I don't need to manipulate it from my app.

Update: No JS necessary. I can simply set a class each on img and video and just apply CSS on the class as normal. It seems to work. You do need to know the aspect ratio in advance.

/* The video tag */
.video {
  aspect-ratio: 16 / 9;
  background-color: black;
}

/* The img tag, if you have an img-based poster. */
.poster {
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

[luwes]

Good findings!

Yes, setting the aspect-ratio or dimensions is a requisite for preventing Cumulative Layout Shift (CLS) (https://web.dev/articles/cls)

We do this in all our embeds as well.
e.g. https://github.com/muxinc/media-chrome/blob/main/examples/vanilla/advanced.html