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:
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...
精彩评论