onclick="load(url)" into iframe issue

dposthuma · 09-21-2012, 06:39 PM

I have a client that has 15 unique movies, each must be dynamically loaded into an iframe created within the webinar page using the click of a text-link. I am trying to use the onclick event, but when multiple movies are listed, the code wants to load only the first movie listed. The code for a single movie currently looks like...

Code:

<script type="text/javascript">

function load(file){
var iframeTag = document.getElementById('frame');
var body = document.getElementsByTagName('body').item(0);
var myiframe = document.getElementById('myiframe');
if(iframeTag) body.removeChild(iframeTag);
iframe = document.createElement('iframe');
iframe.src = file; 
iframe.id = 'frame';
iframe.width = '960px';
iframe.height = '720px';
iframe.frameborder = '0';
iframe.scrolling = 'no';
myiframe.appendChild(iframe);
} 
                        </script>
                  <a onclick="load('unique movie url'); return false">Load Movie </a></p>

How can I configure the code so that I will have 15 separate "Load Movie" links, each able to load its own unique movie into the iframe that is generated? Similarly, I would guess I would need to "unload" previous movie urls before another one could be loaded???

Thanks in advance for any help you can offer...I am stumped.

sunfighter · 09-22-2012, 04:08 PM

Hope your not trying to do this with one button. 15 movies, 15 buttons or a select dropdown with 15 options. Then send the url with each button.

xelawho · 09-22-2012, 05:13 PM

why not just hardcode the iframe and change the src onclick?

Code:

<body>
<iframe id="frame" width = '960px' height = '720px' height = '720px' frameborder = '1' scrolling = 'no'></iframe><br>
<script type="text/javascript">

function load(file){
document.getElementById('frame').src=file+"?autoplay=1";
} 
</script>
<a href="#" onclick="load('http://www.youtube.com/embed/XmxaPKt94jI'); return false">Load Movie 1</a>
<a href="#" onclick="load('http://www.youtube.com/embed/Ns7Z8ag4oSY'); return false">Load Movie 2 </a>
<a href="#" onclick="load('http://www.youtube.com/embed/yv0zA9kN6L8'); return false">Load Movie 3 </a>
				  
</body>

dposthuma · 09-24-2012, 03:34 PM

Thanks, that worked fine. I guess I was making it more complicated than it needed to be.

bigirl · 01-25-2013, 07:54 PM

Quote:

Originally Posted by xelawho

why not just hardcode the iframe and change the src onclick?

Code:

<body>
<iframe id="frame" width = '960px' height = '720px' height = '720px' frameborder = '1' scrolling = 'no'></iframe><br>
<script type="text/javascript">

function load(file){
document.getElementById('frame').src=file+"?autoplay=1";
} 
</script>
<a href="#" onclick="load('http://www.youtube.com/embed/XmxaPKt94jI'); return false">Load Movie 1</a>
<a href="#" onclick="load('http://www.youtube.com/embed/Ns7Z8ag4oSY'); return false">Load Movie 2 </a>
<a href="#" onclick="load('http://www.youtube.com/embed/yv0zA9kN6L8'); return false">Load Movie 3 </a>
				  
</body>

Hi xelawho,

I like your approach to this issue. Would you have an idea of the code needed if I wanted an external link to load the page with Movie 2 playing?

Thank you!