Geek Answers Handbook

Replace image on YouTube video

I have an image, and I would like to link the image to the embedded YouTube video, for example, if the user clicks on the image, it starts playing in the place where the image used to be. Any thoughts on how I can do this?

Thanks,

David

+4
source share
2 answers

Put the embedded video in a div that is invisible:

<div id="video" style="display: none;"> embedded video code here </div>

Then also enter img and id:

 <img id="videopic" src="videopic.jpg" alt="Video Picture" />

Then place a link around the image pointing to some JavaScript that hides the image and shows the embedded video:

 <a href="javascript:document.getElementById('video').style.display = 'block'; document.getElementById('videopic').style.display = 'none'; void(0);"> <img id="videopic" src="videopic.jpg" alt="Video Picture" /> </a>

So the full code:

 <div id="video" style="display: none;"> embedded video code here </div> <a href="javascript:document.getElementById('video').style.display = 'block'; document.getElementById('videopic').style.display = 'none'; void(0);"> <img id="videopic" src="videopic.jpg" alt="Video Picture" /> </a>
+4
source 
 <div id="hideThisUltraCoolVideoFromYou" style="display:none;"> <object style="height: 390px; width: 640px"> <param name="movie" value="http://www.youtube.com/v/V4jZ_BV4MQ4?version=3&autoplay=1"> <param name="allowFullScreen" value="true"> <param name="allowScriptAccess" value="always"> <embed src="http://www.youtube.com/v/V4jZ_BV4MQ4?version=3&autoplay=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="390"></object> </div> <img style="width:640px;height:390px;cursor:pointer;" src="thisPictureInsteadOfVideo.jpg" onclick="this.style.display='none';document.getElementById('hideThisUltraCoolVideoFromYou').style.display='block';" />

something like that:)

0
source

More articles:


All Articles