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?

possible duplicate of [Get YouTube Video dimensions (width/height)](http://stackoverflow.com/questions/9514635/get-youtube-video-dimensions-width-height) — davidcondrey, Oct 05 '14 at 00:15

score 24 · Accepted Answer · edited Mar 07 '17 at 20:56

24

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

edited Mar 07 '17 at 20:56

Julien Rodrigues

898
2
8
18

answered Nov 04 '11 at 19:06

mrtsherman

38,596
21
85
109

1

For bonus points, whats the opposite? For example, when you have the height, but want the width? – Drew Baker Sep 16 '13 at 22:17
1

Flip the divisors, eg 315 * 16/9 = 560 – Feb 16 '17 at 23:50

score 5 · Answer 2 · answered Dec 21 '15 at 16:05

5

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

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

answered Dec 21 '15 at 16:05

Mattias H

119
1
3

1

this is actually a really good solution for now. I asked this in 2011 and i always though why we can't do this via css. brilliant solution now. – Yusaf Khaliq Jan 17 '16 at 16:04

score 0 · Answer 3 · answered Jul 31 '17 at 11:12

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

Marius · Answer 4 · 2011-11-04T20:39:48.977

0

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

edited Nov 04 '11 at 20:39

answered Nov 04 '11 at 19:04

Marius

55,927
31
124
146

Does that maintain the aspect ratio? – Robert Harvey Nov 04 '11 at 19:06
Do you want it to maintain the aspect ratio if the iframe was to change size? – Marius Nov 04 '11 at 19:09

Sagive · Answer 5 · 2020-04-22T14:44:52.437

-1

The best way is to simply use CSS because u can keep
it responsive as the page loads and not have a visible
'jump' in the iframe width and height.

Also, you don't have to set a fixed width (although u can)

like this:

iframe {width: 100%; height: calc(~'100% * 9/16');}

edited Apr 22 '20 at 14:44

answered Apr 22 '20 at 14:29

Sagive

1,526
1
20
31

16:9 aspect ratio with fixed width

5 Answers5

Linked