以 100% 宽度动态调整 iFrame 大小
我的网站上有许多来自 Vimeo 的嵌入式 iFrame。我正在重新设计它，需要使它们全部适合新设计。
我可以通过将它们全部设置为 100% 宽度来轻松地使宽度适合，但高度都不同......我如何重新调整它们的大小并保留比例？
谢谢！！
I have many embedded iFrames from Vimeo on my site. I'm in the process of redesigning it and need to make them all fit to the new design.
I can easily make the width fit by setting them all to 100% width, but the heights are all different... how can I re-size them and retain the ratio?
Thanks!!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
使用 jquery，您可以通过如下方式获取框架的宽度和高度：
通过此信息，您可以计算给定 iframe 的纵横比（比率 = w/h）。然后您可以计算每个 iframe 的新宽度或高度。我猜你的设计会（本质上）限制每个框架的宽度，所以你也可以使用它作为你的基线 --> newHeight =ratio * maxWidth
现在你有了新的尺寸，你可以适当地设置它们。
Using jquery you can get the width and height of the frame with something like this:
With this information you can calculate the given iframe's aspect ratio (ratio = w/h). Then you could calculate a new width or height for each iframe. I'm guessing that your design will (inherently) limit the width of each frame, so you may as well use that as your baseline --> newHeight = ratio * maxWidth
Now you have your new dimensions and you can set them appropriately.
为什么要将视频宽度设置为 100% 而不仅仅是视频的实际宽度？
我想，在编写每个 iframe 元素之前，您可以：
使用 Vimeo API 获取每个视频的高度和宽度，例如 http://vimeo.com/api/v2/video/8564338.json。
将 iframe 的高度设置为
videoHeight * window.innerWidth / videoWidth（或类似的值！）对我来说看起来很老套......
Why do you want to set the video widths to 100% and not just the actual width of the video?
I guess that, before writing each iframe element, you could:
Get height and width for each video using the Vimeo API, e.g. http://vimeo.com/api/v2/video/8564338.json.
Set the height of the iframe as
videoHeight * window.innerWidth / videoWidth(or something like that!)Looks pretty hacky to me...