Resizing iFrame dynamically with 100% width

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 retai开发者_开发技巧n the ratio?

Thanks!!

Using jquery you can get the width and height of the frame with something like this:

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

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.

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:

1. Get height and width for each video using the Vimeo API, e.g. http://vimeo.com/api/v2/video/8564338.json.

2. Set the height of the iframe as videoHeight * window.innerWidth / videoWidth (or something like that!)

Looks pretty hacky to me...