How to maintain height and width proportionally to 16:9 aspect ratio in any screen

I want maintain height and width proportionally to 16:9 aspect ratio in any screen.

The issue which am facing:

I have a video in my website, I am following 16:9 aspect ratio format. For that am using width as 1280 and height as 720. Calculating according to screen height and screen width.

In my machine it's shown properly. But, when I saw in my friend's machine it's doesn't shown properly. When I debugging I found that, width is applied as 1280 and height as 670 (because, bookmark toolbar is enabled). Due to the above height variation, Video is not displayed properly.

How to maintain width and height proportionally as per 16:9 format?

Solution

Once you find the video width you should use divide by the 16/9 ratio to find the proper height. Relying on the window height wont work.

var vid_w = $(window).width() - 156; //1436 - 156 = 1280
var vid_h = vid_w / (16/9); // find 16/9 ratio height

alert('Your video width would be '+vid_w+' and height '+vid_h)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>