DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Rajeshkannan has posted 1 posts at DZone. You can read more from them at their website. View Full User Profile

Play Youtube video with custom thumbnail onClick event

  • submit to reddit
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="" lang="en-US">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Demo Page For Autoplay youtube video while clicking on a custom thumbnail image</title>
<link href=',300,600,700' rel='stylesheet' type='text/css'><script  type="text/javascript" src=""></script>
		margin	: 0;
		padding	: 0;
		background	: #EEE;
		color		: #333;
		font-family: 'Open Sans', sans-serif;
		font-size	: 12px;
		width	: 1012px;
		margin	: 0 auto;
	<div id="wrapper">
		<h1>Demo Page For Autoplay youtube video while clicking on a custom thumbnail image</h1>
		<div class="custom-th"><img src="" style="cursor:pointer" /></div>
		<div id="thevideo" style="display:none">
		<object width="560" height="315"><param name="movie" value=""></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
		<p>Demo by : <a href="">WordPress Themes</a> </br>
		Article Link : <a href="">Custom Thumbnail with fadeout animation for Youtube Videos</a>
	<script type="text/javascript">
	$(document).ready(function() {
		$('.custom-th').click(function() {
			$('.custom-th').fadeOut('slow', function() {

The snippet is basically a html file that will first display a larger thumbnail image.  Upon clicking on the thumbnail, the image will be faded and youtube video will start playing.