Link to home
Start Free TrialLog in
Avatar of Sam Cohen
Sam CohenFlag for United States of America

asked on

Loading Iframe content on thickbox Popup

I am using thickbox to pop open my content. here is my code:

//hidden until popup happens
<div id="youtubeplayer-20" style="display:none;">
<iframe src="http://player.vimeo.com/video/40027856?autoplay=1" width="550" height="309" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>


<a href="#TB_inline?height=309&width=550&inlineId=youtubeplayer-20" class="thickbox" title="Video Introduction"><br />
<img src="video-image1.png" alt="" title="intro" width="280" height="159" class="alignleft size-full wp-image-11546" /></a>

Because I have the vimeo video set to autoplay (autoplay=1), when you page loads, it plays the video in the background which means the content is being load before the popup is launch.

Is there anyway to only load the iframe content in the popup to load after it has pop up?
Avatar of ahoffmann
ahoffmann
Flag of Germany image

add the iframe tag in your popup handler
Avatar of Sam Cohen

ASKER

How do I do that?
// something like:

d=document.GetElementByID('youtubeplayer-20');
i=document.createElement('iframe').src="your-url-here";
i.setAttribute( ... your attributes here ... );
d.appendChild(i);

// quick&dirty
document.GetElementByID('youtubeplayer-20').innerHTML='<iframe ........></iframe />';
Hmm, not sure how to place my code into yours..

is the second an onClick function?
> Hmm, not sure how to place my code into yours..
//hidden until popup happens
function your_hidden_until_popup_happens() {
  // your other code ...
  document.GetElementByID('youtubeplayer-20').innerHTML='<iframe ........></iframe />';
  // please fill in your correct iframe tag
}
Im sorry I am pretty confused, Im not much of a Javascript expert.

This is my original code:

<div id="youtubeplayer-20" style="display:none;">
<iframe src="http://player.vimeo.com/video/40027856?autoplay=1" width="550" height="309" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

<!-- This link launches the above code -->
<a href="#TB_inline?height=309&width=550&inlineId=youtubeplayer-20" class="thickbox" title="Video Introduction"></a>

Open in new window

>  <!-- This link launches the above code -->
hmm, this link is a reference to an internal ankor in your page
I doubt that it will do anything without any script code
can you please post the complete tag of the corresponding
  <a name="TB_inline?height=309&width=550&inlineId=youtubeplayer-20" ></a>
ASKER CERTIFIED SOLUTION
Avatar of Sam Cohen
Sam Cohen
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Because I found the correct answer. :)