Junk styles in javascript.

[plutorg]

Good day to all. I am just getting to know your player and I like it very much. But! There are a number of complaints about its appearance.
It is clear that the styles can be rewritten (too ancient an approach). Which is what I am doing now. However, this does not answer the question: why do you store some styles in JavaScript. Eliminate this misunderstanding, since it clearly interferes with the display of the player itself during initialization, causing it to twitch, in particular - .video-js {width: 300px; height: 150px;} but other residual styles have no place there either. But if you really want it, wouldn't it be better to make .video-js {width: '100%'; 'aspect-ratio': '16/9';} the default?

The thing is that the initial initialization parameters do not support width: "100%".

Simply put, if you don't specify the sizes during initialization and decide everything using styles, a jump from default sizes to the required ones occurs. If you remove this "garbage" style from the script or replace it with the one I suggested above, then everything is fine.

video.js 8.16.1

[welcome]

👋 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.

[mister-ben]

That came about because that's the size browsers use by default for a <video> element, so that video.js could be a drop-in replacement. Changing the default styles isn't something that can be done lightly, as it would be a breaking change for some.

You can use the videojs-16-9 class on the embed for a 16:9 aspect ratio that will fill the parent's width..