CODEWITHSUNDEEP
javascripthtmlcssvideo
Tim Rackham
Tim Rackham

Reputation: 1

Js background video Adjusting Centre

I am trying to get my video to centre itself no mater what screen it uses. I have the css to make sure the video all ways covers the screen according to ratio changes and not trying to get the css for left to change so that it centres the video 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 idea is that it measures the overlap of the video and divides this by 2. This then give with the number i need to add to the video left css to move it into the centre of the screen.

Can someone say why this isn't working ?

Upvotes: 0

Views: 37

Answers (1)

Mayur Shedage
Mayur Shedage

Reputation: 1037

Kindly check whether you are applying proper CSS or not.

if( VideoWidth > windowSize){
    $(".videojsfix").css({
    left: 'moveDifference'
}); };

if( VideoWidth > windowSize){
    $(".videojsfix").css({
    left: 'moveDifference'+ 'px';
}); };

Upvotes: 1

Related Questions