10

例如，如果我要嵌入 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巧妙地完成吗？

4

5 回答 5

24

纵横比只是宽度：高度。因此，如果您想根据已知宽度计算高度，则非常简单。

//width=560, wanted height is 315
$('.player').parent().attr('height', 560*9/16);
于 2011-11-04T19:06:59.527 回答
5

我建议为此使用 css calc 而不是 jQuery：

width: 560px;
height: calc(560px * 9/16);
于 2015-12-21T16:05:26.970 回答
0 
$('.player').parent().attr('width', 560*9/16)
于 2011-11-04T19:04:36.723 回答
0

很老的问题，但如果有人仍在寻找答案，这可能是一种更好的方法。

    函数getRelativeWidth（比率，crntHght）{
        ratio = ratio.split(":");
        var wdthRto = 比率[0];
        var hghtRto = 比率[1];
        返回 ((wdthRto*crntHght) / hghtRto);
    }

    函数getRelativeHeight（比率，crntWdth）{
        ratio = ratio.split(":");
        var wdthRto = 比率[0];
        var hghtRto = 比率[1];
        返回 ((crntWdth*hghtRto) / wdthRto);
    }
    var wdth = 1600;
    变量 hght = 900;
    var getHeight = getRelativeHeight("16:9", wdth);
    var getWeight = getRelativeWidth("16:9", hght);

    控制台.log(getHeight);
    控制台.log(getWeight);
于 2017-07-31T11:12:40.623 回答
-1

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

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

像这样： 

iframe {width: 100%; height: calc(~'100% * 9/16');}
于 2020-04-22T14:29:39.813 回答