I set “scrollbar-gutter: stable both-edges” for my website for a symmetric look (“scrollbar-gutter: stable” seems to create a slightly skewed look to me) but now I need to display a video that covers the whole screen including the space on the left created by “both-edges” – the scrollbar itself on the right is fine. What would be the best way to do this?
I thought of just using “scrollbar-gutter: stable” instead and then manually adding the scrollbar width on the left for each element, but it seems that the only way to get the actual width of the scrollbar would be to use JavaScript (How can I get browser scrollbar width?). This seems to me like it might not be the best practice – adjusting a very basic property of the whole page, moving all the content with JS. But this is just a sort of a feeling not based on anything rational and I am very new to web development so is probably completely wrong. Would be grateful for any advice.