Can I have 2 embeded youtube video thumbnails next to each other so they can click 1 and it expands?

1
votes

And it enlarges to the regular size? I don't want to excede the 560 x 315 size I currently have.

Basically, I have 2 youtube videos, and I can sucessfully embed one by using the following:

 <iframe width="560" height="315" src="http://www.youtube.com/embed/3yj05D_DtIs?wmode=opaque" frameborder="0" allowfullscreen></iframe>

But I have a second youtube video that I want to display there as well, however, I don't want to take up more than the 560 width or the 315 height, so I don't want to put it next to it or under it. So I'm hoping there's a way so I could have, say, a thumbnail of video 1 that's 250 in width, and video 2 is 250 in width, side-by-side. Then, when a client clicks on the video1, for instance, it zooms to the regular level -- 560 x 315. When the video is finished, it reduces back to its thumbnail size, 250 width. This will give the client the option to see and click/view the youtube video 2.

Is this possible, and if so, could anybody explain how I can accomplish this? Any guidance in this regard would be sincerely appreciated! Thanks a bunch!!

1
asp.netiframeyoutubeembedmultimedia
can you give us the url to see it in action ? Possible solution is to use javascript and let only one to run. – Aristos
Absolutely, Aristos. It's located at ussvision.com/products/exactscan .... there is only 1 video up there at the moment, but I'd like to have both videos in that same area, so when you click on video, it expands and covers the area, then reduces back to a thumbnail when finished (both videos are only 30 seconds). Thanks! – Jason Weber
I think that this is simple, just a javascript on the thubnails that change the src of the iframe. – Aristos

1 Answers

1
votes

You add an id to your iframe, then you make the 2 thumbnail images and you use the onclick event of the image to run a code like.

document.getElementById("iframeId").src = "http://www.youtube.com/embed/3yj05D_DtIs?wmode=opaque"

I think that there is an option to start auto play on youtube, add this also.

Ok, I have update your sample here http://jsfiddle.net/jLcpH/6/

The html code

<iframe id="ShowFrameID" width="270" height="152"            
     src="http://www.youtube.com/embed/3yj05D_DtIs?wmode=opaque">
</iframe>

<a href="#" onclick="cShowMe(1); return false;">
    <img id="natgeo1" width="270" height="152"  
       src="../images/natgeothumb1.jpg" border="0" /></a>

<a href="#" onclick="cShowMe(2); return false;">
    <img id="natgeo2" width="270" height="152" 
       src="../images/natgeothumb2.jpg" border="0" /></a>​

and the javascript code.

function cShowMe(WhatToShow)
{
    var TheIframe = document.getElementById("ShowFrameID");        
    // I change the src with a number code because is small to pass as variable
    //  and you have only 2 different video to show.
    if(WhatToShow == 1)        
     TheIframe.src = "http://www.youtube.com/embed/3yj05D_DtIs?wmode=opaque" ;
    else
     TheIframe.src = "http://www.youtube.com/embed/3yj05D_DtIs?wmode=opaque" ;            
}