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

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

Solution

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" ;            
}