html - Auto-Fit iFrame Height

Question

Right now, I have a jQuery UI pop-up dialog that reads from an external page. This page reads from another external that has a video via flowplayer.

I'm using iframe to embed the video in the first:

<div id="donkeyVideo">
<iframe id="iframeDonkey" width="100%" height="496" src="../../../../video/donkey-2009-02-23.html" frameBorder="0"></iframe>
</div>

The width seems all right with 100%, but 100% height doesn't work. Is there a way around this?

Where and how do I embed the code, as well as the ID stuff. Please anyone, help?

Answer 1

You'll have to use some sort of JavaScript to dynamically adjust the height of an iframe if you want to use something like 100% rather than a pixel value.

Unfortunately, my understanding is that you cannot dynamically alter the height of an iframe that is pointing to a different domain than your own.

From lost-in-code:

jQuery : Auto iFrame Height

Please note that this jQuery autoHeight plugin will not work with iFrames accessing content from a different domain or remote location since the window object originating from a different domain cannot be accessed from the current one due to JavaScript security restrictions.