Question

I have an image, and I would like to make the image link to an embedded YouTube video, such that if the user clicks on the image, it starts playing in the place where the picture used to be.

<div id="myvideo">
    <a href="http://www.youtube.com/watch?v=Msef24JErmU&playnext_from=TL&videos=dgzKE_Lyv7o">
    <img src="starryeyedsurprise.jpg"></a>
</div>

Something like what the above code does, except not just hyperlink to it.
So I know I have to have javaScript replace what’s in #myvideo with:

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/Msef24JErmU&hl=en_US&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Msef24JErmU&hl=en_US&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

And then automatically start playing.
I guess I don’t need it to be a YouTube video per se, I could just host the video on my own site (it’s so low volume that I don’t have to worry about serving up a video every once in a while).

Answer 1

Just use:

$("#myvideo").html('<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/Msef24JErmU&hl=en_US&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Msef24JErmU&hl=en_US&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>');

…as an onclick handler. For example:

<a href='javascript:void(0);' onclick='DoVideoSwap();'> ... </a>

This will replace the image content with the video.