Avatar of Sam Cohen
Sam Cohen
Flag 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?
JavaScriptjQueryCSS

Avatar of undefined
Last Comment
Sam Cohen

8/22/2022 - Mon
ahoffmann

add the iframe tag in your popup handler
Sam Cohen

ASKER
How do I do that?
ahoffmann

// 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 />';
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
Sam Cohen

ASKER
Hmm, not sure how to place my code into yours..

is the second an onClick function?
ahoffmann

> 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
}
Sam Cohen

ASKER
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

Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ahoffmann

>  <!-- 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
Sam Cohen

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Sam Cohen

ASKER
Because I found the correct answer. :)