Соотношение сторон 16: 9 с фиксированной шириной

Question

Если бы я вставил видео на YouTube, например

<iframe width="560" src="http://www.youtube.com/embed/25LBTSUEU0A" class="player" frameborder="0" allowfullscreen></iframe>

Используя jQuery, я бы установил высоту с соотношением сторон 16: 9, поэтому, если ширина равна 560, высота должна быть 315 пикселей.
У меня есть этот jquery для установки высоты, но я не знаю, как применить соотношение 16: 9

$('.player').parent().attr('width', ':9ratio');

или это можно сделать аккуратно с помощью css?

Answer 1

Соотношение сторон - это только ширина: высота.Поэтому, если вы хотите рассчитать высоту на основе известной ширины, это довольно просто.

//width=560, wanted height is 315
$('.player').parent().attr('height', 560*9/16);

Answer 2

Я бы рекомендовал использовать css calc вместо jQuery для этого:

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

Answer 3

Довольно старый вопрос, но если кто-то все еще ищет ответ, этот может быть лучшим подходом.

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

Answer 4

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