YouTube (and other) Video Placeholder Image On-Click Swap Tutorial


I’ve received a good question or a tutorial request from one of my readers Andrew, he asked that I do a tutorial on how to make the video placeholder image hide on click and get replaced with the video itself. This is what this tutorial is going to be about. The first thing you will need is a placeholder image, and you can use the YouTube style video play button Photoshop layer PSD file For video placeholder images I posted in the past.

Once you have the place holder image, now we just need to code it in.¬†First I will tell you how I do it and then I will show you. Maybe it’ll be easier to grasp this way.

First I create two DIVs, one will hold the placeholder image and the other will be where the video will go. I do not directly paste the video embed code into this second DIV but instead I have javaScript insert it in there when someone clicks the image. The reason is because we want the video to be set to autoplay but if we stick it in the DIV when the page loads, it will start playing right away in some browsers. So we leave that second DIV empty until someone clicks the placeholder image.

The image DIV has a onclick function call that will engage the function that swaps everything. It will first hide the placeholder image DIV and then insert the video embed code into the video VID and then will make this DIV visible.

You can preview how this works here.

Here is the code:

<div style="width:467px;margin:50px auto;">

	<div id="video_pholder" onclick="seevideo()"><img src="images/video-placeholder.jpg" width="467" height="286" /></div>
    
    <div id="video_code" style="display:none;"></div>
    
    <script language="javascript">
	
		function seevideo() {
			
			document.getElementById('video_pholder').style.display='none';
			document.getElementById('video_code').innerHTML='<object width="467" height="286">
				<param name="movie" 
					value="http://www.youtube.com/v/zIoFnfMhq_Y?version=3&amp;hl=en_US&amp;rel=0&amp;autoplay=1"></param>
				<param name="allowFullScreen" value="true"></param>
				<param name="allowscriptaccess" value="always"></param>
				<embed src="http://www.youtube.com/v/zIoFnfMhq_Y?version=3&amp;hl=en_US&amp;rel=0&amp;autoplay=1" 
					type="application/x-shockwave-flash" width="467" height="286" allowscriptaccess="always" allowfullscreen="true"></embed>
				</object>';
			document.getElementById('video_code').style.display='block';
			
		}
	
	</script>
    
</div>

That’s it, you should now be able to make your own placeholder image swap to a video.

If you liked this post, share it with your friends!

3 Comments

  1. Santiago says:

    The example does not work

  2. ian says:

    Unfortunately this doesnt work. The image isnt clickable in either the previiew or when i try to implement it locally. Any ideas?

Please Leave Your Comment

Please make sure to enter the required information where indicated. We moderate all comments so please no link dropping; do not spam, and do not advertise!
 

Name (required):

Email (will not be published) (required):

Website:

Comment: