以100％宽度动态调整iFrame大小

Question

我的网站上有很多来自Vimeo的嵌入式iFrame。我正在重新设计它，并且需要使它们都适合新的设计。

我可以通过将它们全部设置为100％宽度来轻松调整宽度，但高度都不同......我如何重新调整它们的大小并保持比例？

谢谢！

Answer 1

使用jquery可以得到框架的宽度和高度，如下所示：

w = $("#iframe").width();
h = $("#iframe").height();

使用此信息，您可以计算给定的iframe的宽高比（比率= w / h）。然后，您可以为每个iframe计算新的宽度或高度。我猜你的设计会（固有地）限制每个帧的宽度，所以你也可以将它用作你的基线 - ＆gt; newHeight = ratio * maxWidth

现在你有了新的尺寸，你可以适当地设置它们。

Answer 2

为什么要将视频宽度设置为100％而不仅仅是视频的实际宽度？

我想在编写每个iframe元素之前，您可以：

1. 使用Vimeo API获取每个视频的高度和宽度，例如： http://vimeo.com/api/v2/video/8564338.json

2. 将iframe的高度设置为videoHeight * window.innerWidth / videoWidth（或者类似的东西！）

对我来说看起来很漂亮......