Tips on keeping the width and height in proportion to a 16:9 aspect ratio across all screen sizes

I am trying to keep the height and width proportional to a 16:9 aspect ratio on any screen size.

The problem I am encountering is:

I have a video on my website that follows a 16:9 aspect ratio format, with a width of 1280 and a height of 720. I calculate the dimensions based on the screen width and height.

On my computer, everything displays correctly. However, when viewing on my friend's computer, the video does not display properly. Upon debugging, I discovered that the width is set to 1280 and the height to 670 on my friend's machine (as the bookmark toolbar is enabled). This height discrepancy is causing the video to not display properly.

Is there a way to maintain the width and height proportionally according to the 16:9 format?

javascriptaspect-ratio

Answer №1

Calculating the proper height for a video involves dividing the video width by the 16/9 ratio rather than relying on the window height.

var vid_w = $(window).width() - 156; //1436 - 156 = 1280
var vid_h = vid_w / (16/9); // calculate 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to test the initial launch of an Android application using Cordova

I am developing an Android application using Cordova. My app consists of multiple pages, with the main homepage being index.html. I need to determine if it is the first time a user lands on the homepage after opening the app, regardless of how many times ...

javascriptandroidangularjscordova

Merge JavaScript Functions into a Single Function

I am looking to streamline the following javascript code into a single function by utilizing an array of ids instead of repetitive blocks. Any suggestions on how to achieve this would be greatly appreciated. Currently, in my code, I find myself copying an ...

javascriptjquery

Simple steps to correct the npm installation of the React list filter

I encountered an issue while trying to install react-list-filter using npm (npm install react-list-filter). The error messages displayed in my console are as follows: npm ERR! code ETARGET npm ERR! notarget No matching version found for <a href="/cdn-c ...

javascriptnode.jsreactjsnpm

I'm unable to view any modifications in my React application after making updates to the code and rebuilding the solution

After following a helpful tutorial on creating a Node.js and React app in Visual Studio, I encountered an issue. Despite successfully implementing the tutorial and seeing the "Welcome to React" message after hitting Ctrl + F5, further changes to my app.tsx ...

javascriptnode.jsreactjs

Expanding the functionality of express.Router

Can someone help me with how to extend the functionality of express.Router? I attempted the following: class Test extends express.Router() { }; However, I encountered an error when trying this in Express. Does anyone have a solution for this issue? ...

javascriptnode.jsexpress

I am facing issues with my submit buttons as they are not functioning

Once I hit the submit buttons, there seems to be an issue with redirecting to another page. Could anyone assist in identifying the error within this code and why my buttons "typ1" and "cod" are not redirecting to the specified location? <?php inc ...

javascriptphphtml

Prevent the use of harmful language by implementing jQuery or JavaScript

Is there a way for me to filter certain words (such as "sex") using regex, even when people use variations like "b a d", "b.a.d", or "b/a/d"? How can I prevent these kinds of words from getting through? I'm trying to filter more than just one word - ...

javascriptjqueryhtml

Positioning tooltip arrows in Highcharts

I'm attempting to modify the Highcharts tooltip for a stacked column chart in order to have the arrow on the tooltip point to the center of the bar. I understand that I can utilize the positioner callback to adjust the tooltip's position, but it ...

javascriptjqueryhtmlcsshighcharts

The toggle function for the classList ('open') is functioning correctly and can be seen in the inspect element tool, however, the website is not displaying the associated style

How can I make the .nav show styles in .open after clicking #menu-icon? Note: I used Bootstrap to create the nav HTML <!-- logo --> <div class="logo"> <img src="assets/logo.png" alt="logo g's shop& ...

javascripthtmljquerycssbootstrap-4

Encountering an issue with the SSR module evaluation despite having SSR disabled in Svelte Kit

I needed a specific route in my app to not be server-side rendered. This can be achieved by setting export const ssr = false in the module script or configuring ssr: false in the svelte.config.js, as outlined in the Svelte documentation. Despite disabling ...

javascriptserver-side-renderingsveltesveltekit

Showing arbitrary text on Vue.js template

In my Vue.js application, I have a Loader component that randomly displays one of several messages. Here is how I implemented it: Vue.component('Loader', { data() { const textEntries = [ 'Just a moment', ...

javascriptvue.js

Utilizing HTML/CSS with React/Bootstrap: A Comprehensive Guide

Looking for help with integrating HTML/CSS code into React/Bootstrap? I need assistance with coding in React using Bootstrap. How do I effectively use components and props? Even after installing bootstrap, I am encountering errors. Is it possible to dire ...

javascripthtmlreactjsbootstrap-5

Three.js - Exploring the Significance of "THREE" within the THREE.scene Framework

Just starting out in JavaScript and experimenting with animations using three.js library. I'm trying to grasp the meaning behind: const scene = new THREE.Scene(); Why is the "THREE" necessary in THREE.Scene? Could we not simply write const scene = n ...

javascriptthree.jsscene

The Vue EventBus does not support passing object attributes

Looking for assistance with integrating two Vue single page components. The 'Searchbar' component features a dialog box where users input data. This data is required in the 'ResultList' component for further processing. To achieve this ...

javascriptvue.jsevent-buselement-ui

Is it possible to send an email with an attachment that was generated as a blob within the browser?

Is there a way to attach a file created in the browser as a blob to an email, similar to embedding its direct path in the url for a local file? The file is generated as part of some javascript code that I am running. Thank you in advance! ...

javascripthtmlbrowsercross-browser

Unusual behavior observed during npm update operation

Just starting out with Angular and NPM, I have encountered a puzzling situation. I have two Angular-CLI projects. When I run npm update --save in one project, the dependencies (including @angular dependencies) are updated from version ^5.2.0 to ^5.2.3 in ...

javascriptnode.jsangularnpm

Modifying the app.css file in the source tab of dev tools does not cause any changes in the DOM when working with a

Just starting out with react js here. While exploring developer tools in Chrome, I attempted to tweak some CSS in the elements panel and noticed the changes reflecting above in the DOM. However, when I navigate to the sources tab, I'm unable to modify ...

javascriptreactjs

Execute the script when the document is fully loaded

Is there a way to show a dialog in jQuery when the document loads without using <body onload="showdialog();">? Can the javascript code be placed in the main div or footer div to work like the onload event? <body onload="$('#dialog').sli ...

javascripthtml

Angular2 Service Failing to Return Expected Value

It's frustrating that my services are not functioning properly. Despite spending the last two days scouring Stack Overflow for solutions, I haven't been able to find a solution that matches my specific issue. Here is a snippet of my Service.ts c ...

javascriptjsonangulartypescriptangular2-services

Encountering the error message "require is not defined" in the browser while utilizing gulp-browserify for my React.js modules

I am currently working on using gulp-browserify for creating a bundle.js file that will be utilized in the client's browser to initiate rendering of React components. Below is my App.js file: /** @jsx React.DOM */ var React = require('react&apo ...

javascriptnode.jsgulpreactjsbrowserify