Several issues here, mainly: - https://github.com/w3c/webvtt/issues/529 where we differ in behavior from Chrome. We seem to follow spec closer in that we set the font-size to 5% of the video element's height, but Chrome's behavior of picking 5% of `max(width, height)` seems sensible for portrait videos. - https://github.com/w3c/webvtt/issues/530 where our [container for the cues sets `font: ~5vh sans-serif`](https://searchfox.org/mozilla-central/rev/fa11d06fd84c487cb0a135c08af796daa6a56e44/dom/media/webvtt/vtt.sys.mjs#657) essentially prohibiting a site from styling the cues to anything smaller than the container's line-height. Per my discussion with emilio, this `font` style is needed on the container or we'd inherit from the video element which a site can influence. But we can make it `0` on the container just for the purpose of preventing inheritance from the video element, and set it to `~5vh` on the cue elements directly, which a site can override through the `::cue` pseudo element. I say `~5vh` above because we compute it manually based on the video element height. Probably because [`vh` is wrong](https://searchfox.org/mozilla-central/rev/fa11d06fd84c487cb0a135c08af796daa6a56e44/dom/media/webvtt/vtt.sys.mjs#619-623) for `::cue`: bug 1664754. The second point above means sites cannot work around this issue even by styling, so P2.
Bug 1950616 Comment 0 Edit History
Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.
Several issues here, mainly: - https://github.com/w3c/webvtt/issues/529 where we differ in behavior from Chrome. We seem to follow spec closer in that we set the font-size to 5% of the video element's height, but Chrome's behavior of picking 5% of `min(width, height)` seems sensible for portrait videos. - https://github.com/w3c/webvtt/issues/530 where our [container for the cues sets `font: ~5vh sans-serif`](https://searchfox.org/mozilla-central/rev/fa11d06fd84c487cb0a135c08af796daa6a56e44/dom/media/webvtt/vtt.sys.mjs#657) essentially prohibiting a site from styling the cues to anything smaller than the container's line-height. Per my discussion with emilio, this `font` style is needed on the container or we'd inherit from the video element which a site can influence. But we can make it `0` on the container just for the purpose of preventing inheritance from the video element, and set it to `~5vh` on the cue elements directly, which a site can override through the `::cue` pseudo element. I say `~5vh` above because we compute it manually based on the video element height. Probably because [`vh` is wrong](https://searchfox.org/mozilla-central/rev/fa11d06fd84c487cb0a135c08af796daa6a56e44/dom/media/webvtt/vtt.sys.mjs#619-623) for `::cue`: bug 1664754. The second point above means sites cannot work around this issue even by styling, so P2.