16:9 aspect ratio with fixed width
14,878
Solution 1
Aspect ratio is just width:height. So if you wanted to calculate the height based on a known width it is pretty straightforward.
//width=560, wanted height is 315
$('.player').parent().attr('height', 560*9/16);
Solution 2
I would recommend using css calc instead of jQuery for this:
width: 560px;
height: calc(560px * 9/16);
Author by
Yusaf Khaliq
Love JavaScript and work with HTML and CSS along with the JavaScript Framework jQuery
Updated on June 09, 2022Comments
-
Yusaf Khaliq almost 2 years
If I were to embed a YouTube video for example
<iframe width="560" src="http://www.youtube.com/embed/25LBTSUEU0A" class="player" frameborder="0" allowfullscreen></iframe>
Using jQuery would I set a height with an aspect ration of 16:9 so if the width is 560 the height should be 315px.
I have this jquery to set a height but I dont know how to apply the 16:9 ratio$('.player').parent().attr('width', ':9ratio');
or can this be done neatly using css?