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

Question

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

我可以很容易地将宽度设置为100％宽度，但高度都不一样......我如何重新调整大小并保持比例？

谢谢！

Answer 1

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

我猜，写每个iframe元素之前，你可以：

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

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

小艾哈克给我...

Answer 2

使用jQuery你可以得到的宽度和高度这样的框架：

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

有了这些信息，你可以计算给定的iframe的纵横比（ratio = w/h）。然后，您可以计算每个iframe的新宽度或高度。我猜你的设计会（固有地）限制每一帧的宽度，所以你可以使用它作为你的基线 - > newHeight = ratio * maxWidth

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