Skip to main content

How to Calculate HTML5 Video Height and Width dynamically to fit web page.



While developing the web pages with inline HTML5 videos we often need to adjust the video width or height according the available space on the web page. 

Here is the solution to find that required height and width keeping the same aspect ratio of the video. 

You may go ahead and set video CSS property to width: 100% and height: auto but this will not give you any idea about how much height the video is going to take on the web page. Then the better approach would be setting the video height or width using Javascript.

So, sometimes to adjust the width according to available height on the web page, it require to calculate the NEW WIDTH which you can set to your video as per available height. The same goes with Height as well. So here are the solutions to solve this problem.

Here I am assuming the video is having 16:9 ratio, which would be a HD video with 1920px width and 1080px height.

Now suppose I want my video to fit in the width of 1280px, then how much height it will this video required to fit with same aspect ratio?

You can calculate it using below formula:

New Video Height = (Current Height / Current Width ) * My Required Width

So Here is the calculation.

 New Video Height  = (1080 / 1920) * 1280

 And this shows that if you want to set 1280px width to the video, it will take 720px of height on your web page.

 Now, how will you calculate the required width if you want your video to fit with  height of 657px.

 You can calculate the required new width using below formula:

 New Width = (Current Width / Current Height) * My Required Height

 So Here is the calculation.

 New Width = (1920 / 1080) * 657

 So, if you want to set 657px height to the video, it will take 1168px of width on your web page. 
Refer the below table to understand about this calculations in short.



Tags: how to set height and width of video in html, html5 video scale to fit div, dynamically adjust video height and width using javascript
Labels:

Comments

Post a Comment

Popular posts from this blog

TechCS: JavaScript Part-2: How to send HTML form data with preserving line breaks in the textarea

Preserve line breaks in <textarea> while sending the HTML form data using JavaScript. Hi friends, Hope you are enjoying the time. Today I am posting a small trick about drafting mail to the given user using Javascript. Look at the following simple HTML page. The page includes user email address, subject and message body.   I have used <textarea> for getting the message body. You would be knowing that form input fields does not preserve the new line character (pressing "ENTER" button in the textarea ). Here I am writing a simple code to preserve your line break or new line character while submitting the HTML form. Look at the following code: <html> <head> <title> CS-Sending Mail preserving Line breaks in the < textarea > </title> <style>      textarea{white-space: pre-wrap;}     input{width: 250px; height: 25px; margin-top: 10px; padding: 2px;  }     .main{width: 1010...
Post a Comment
Read more

Kiddle: The Best Secure Search Engine for your kids

TechCS 1:   Smart kids are accessing Internet and parents are worrying about their Internet uses. Implementing parenting controls for internet uses couldn't satisfy them. Because they know, while browsing the internet some unwanted things may appears on the screen or in the search result which are not good for kid's age. Here,  Kiddle  have a solution for safe search. It is a kid safe visual search engine. Just set the  http://www.kiddle.co/  as homepage of the kid's computer. kiddle provides different search options including the usual  web, images, news and videos. Since Kiddle results are either handpicked and checked by Kiddle editors or filtered by Google safe search. You will get kid-oriented results without any explicit content. The search results are not as cluttered, and come well-spaced with a bigger font, easier for kids to read. In case some bad words are present in a search keyword, Kiddle's guard robot will block the ...
Post a Comment
Read more