VTT subtitles wrong position after adjusting font-size

[lyriclearn]

Description

I'm using Video JS to load VTT subtitles. I have a subtitle on top using "line:1" on the VTT file and another on the bottom using "line:95%".

Everything works fine when font size is set at 100%. However, when I try increasing the font size to 200% the subtitle on top grows in the wrong direction, growing towards the top edge of the video instead of growing towards the centre.

I've tried editing this part of the script file:

`if (overrides.fontPercent && overrides.fontPercent !== 1) { var fontSize = window.parseFloat(cueDiv.style.fontSize); cueDiv.style.fontSize = fontSize * overrides.fontPercent + 'px'; cueDiv.style.height = 'auto'; cueDiv.style.top = 'auto';

By deleting the two last lines, the issue on the top subtitle was solved, but it made the bottom one have the same issue, by having it grow towards the bottom of the video instead of towards the centre.

Reduced test case

https://codepen.io/hugo-sousa-the-bashful/pen/MWGQVdy

Steps to reproduce

1.Create VTT subtitle with top and bottom lines 2.Increase font size on VideoJS player 3.

Errors

No response

What version of Video.js are you using?

7.21.0

Video.js plugins used.

No response

What browser(s) including version(s) does this occur with?

Chrome 106

What OS(es) and version(s) does this occur with?

Windows 10

[welcome[bot]]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[gkatsev]

Yeah, this is a bit tricky because these caption settings are happening at a different layer than it should be. It should be happening inside vttjs, which renders the captions, but currently it's happening at the "app" level (i.e. Video.js). Due to this, it isn't simple to fix things since, as you mentioned, making one change affects the other. Adding support for these inside of vttjs is the proper method, but it's not a quick change, unfortunately.

[lyriclearn]

Thanks for the response @gkatsev. Maybe in a future update then.