16:9 aspect ratio with fixed width

jquery css height width aspect-ratio
Yusaf Khaliq picture Yusaf Khaliq · Nov 4, 2011 · Viewed 14k times · Source

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?

Answer

mrtsherman picture mrtsherman · Nov 4, 2011

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);

Related questions

How do you get the rendered height of an element?

How do you get the rendered height of an element? Let's say you have a <div> element with some content inside. This content inside is going to stretch the height of the <div>. How do you …

Read More
Get height of div with no height set in css

Is there any way to get the height of an element if there is no CSS height rule set for the element I cannot use .height() jQuery method because it need a CSS rule set first? Is there any other …

Read More
How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More