CODEWITHSUNDEEP
javascriptjquerycssiframevimeo
gjunkie
gjunkie

Reputation: 828

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 retain the ratio?

Thanks!!

Upvotes: 0

Views: 1730

Answers (2)

Todd
Todd

Reputation: 676

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.

Upvotes: 1

Sam Dutton
Sam Dutton

Reputation: 15269

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...

Upvotes: 0

Related Questions