1

I am looking for a formula for tracking aspect ratio of SCREEEN or viewport (if there any guide exists you know about, you can link me, not necesairly a fresh code needed :) , but so far I have found only some image resizing related topics or online calculators... )

So the core of a problem ... I have a video (mp4), which is like some kind of background. Now, I need the video to cover whole screen. I know that the video has some aspect ratio, and a screen has some aspect ratio, so I am OK with fact, that on some monitors some edges will be cut.

But there is some limit, where I need to change styles:

Up to 16:9 - using styling 1

From 16:8,99 and wider - you know, like those extra wide curved monitors, I need different styling.

So - how to check, if the aspect ratio is ANY WIDER than 16:9?

So far, I tried to use GDC from this topic (accepted answer), but I was not able to get it working (as every resolution has different GDC, I was not able to compare with 16:9) Whats the algorithm to calculate aspect ratio? I need an output like: 4:3, 16:9

So, for the final, there is the code

function ratiocompare(width, height){
//this I need to create
//sth like 

//if(aspect ratio is any wider than 16:9){return true;}
//else{return false;}
}

function checkratio(){

       var compare = ratiocompare($(window).width(), $(window).width());

       if(compare)
        {  $("#video").css("width","100%");
           $("#video").css("height","auto");
           $("#video").css("left","0");
           $("#video").css("top","50%");
           $("#video").css("transform","translate(0, -50%)");
        }

       else{
           $("#video").css("width","auto");
           $("#video").css("height","130vh");
           $("#video").css("left","50%");
           $("#video").css("top","0%");
           $("#video").css("transform","translate(-50%, 0)");
        }
}

$(document).ready(function() {
 checkratio();
}

So, any tips, solutions? I would be very greatful :) Thank you.

Community
  • 1
  • 1
Zorak
  • 709
  • 7
  • 24

1 Answers1

2

Ok, the solution came from one math forum: divide numbers of the ratio. Number we get is the number we can compare with other aspect ratio...

like 16:9 -> 16/9 = 1.77777777 any number higher than 1.77777777 means, that aspect ratio is wider than 16:9.

in jquery:

function gcd(x, y){
    if (y == 0){ return x; }
    return gcd (y, x % y); 
}

function check(){
 var ratio = gcd($( window ).width(), $( window ).height());
 var testratio =  ($( window ).width()/ratio)/($( window ).height()/ratio);

if(testratio>1.7777777{//screen is wider than 16:9, do something}
}
Zorak
  • 709
  • 7
  • 24