Open ADTC opened 1 month ago
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;
}
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 thatheight: 100%
is already set, but even if I change to10%
, nothing happens.Only fixed pixel values like
403px
or something like10vh
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: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 setheight: 100%
andobject-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.