How can I make my video centered on any screen size? I have the CSS in place to ensure that the video always covers the screen proportionally, but I need help with centering it at all times.
HTML
<div class="heroWrapper">
<video autoplay muted loop class="videojsfix" id="myVideo">
<source src="/video/crystal.mp4" type="video/mp4">
</video>
</div>
JS:
var windowSize = window.innerWidth;
var VideoWidth = document.getElementById("myVideo").offsetWidth;
var difference = windowSize - VideoWidth;
var video = document.getElementById("myVideo");
var moveDifference = ((difference) / 2);
if (VideoWidth > windowSize) {
$(".videojsfix").css({
left: 'moveDifference'
});
};
The goal is to calculate the overlap of the video and divide it by 2 to determine how much to adjust the left CSS property to center the video on the screen. Can anyone explain why this code isn't working as expected?