Question

如果我要嵌入YouTube视频，例如

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

使用jQuery我会设置一个高度为16：9的高度，所以如果宽度为560，则高度应为315px。
我有这个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

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

Answer 4

相当古老的问题，但如果有人仍在寻求答案，那么这个问题可能是更好的方法。


    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 5

最好的方法是简单地使用CSS，因为您可以保留
它会在页面加载时响应并且没有可见的
iframe宽度和高度“跳跃”。

此外，您不必设置固定宽度（虽然您可以）

像这样：

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

16：9宽高比，固定宽度

5 个答案: