16:9 aspect ratio with fixed width

Question

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

Answer 2

I would recommend using css calc instead of jQuery for this:

width: 560px;
height: calc(560px * 9/16);

Answer 3

$('.player').parent().attr('width', 560*9/16)

Answer 4

Pretty old question but if somebody still seeking for the answer, this one could be a better approach.

    function getRelativeWidth(ratio, crntHght) {
        ratio = ratio.split(":");
        var wdthRto = ratio[0];
        var hghtRto = ratio[1];
        return ((wdthRto*crntHght) / hghtRto); 
    }

    function getRelativeHeight(ratio, crntWdth) {
        ratio = ratio.split(":");
        var wdthRto = ratio[0];
        var hghtRto = ratio[1];
        return ((crntWdth*hghtRto) / wdthRto); 
    }
    var wdth = 1600;
    var hght = 900;
    var getHeight = getRelativeHeight("16:9", wdth); 
    var getWeight = getRelativeWidth("16:9", hght); 

    console.log(getHeight);
    console.log(getWeight);