Advanced Search

Return to Snippet

Revision: 61754
at January 12, 2013 06:57 by vijayrajesh
Initial Code 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<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='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'><script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<style>
	body
	{
		margin	: 0;
		padding	: 0;
		background	: #EEE;
		color		: #333;
		font-family: 'Open Sans', sans-serif;
		font-size	: 12px;
		
	}
	#wrapper
	{
		width	: 1012px;
		margin	: 0 auto;
		 
	}
	
</style>
<body>
	<div id="wrapper">
		<h1>Demo Page For Autoplay youtube video while clicking on a custom thumbnail image</h1>
		<div class="custom-th"><img src="http://blog.pixelthemes.com/demo/custom-yt-thumbnail/cusotm-yt-thumbanil.jpg" style="cursor:pointer" /></div>
		<div id="thevideo" style="display:none">
		<object width="560" height="315"><param name="movie" value="http://www.youtube.com/v/XSGBVzeBUbk?&autoplay=1&hl=en_US&amp;version=3"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/XSGBVzeBUbk?hl=en_US&amp;version=3&autoplay=1" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
		</div>
		
		<p>Demo by : <a href="http://blog.pixelthemes.com/">WordPress Themes</a> </br>
		Article Link : <a href="http://blog.pixelthemes.com/ideas/autoplay-youtube-video-while-clicking-on-a-custom-thumbnail-image">Custom Thumbnail with fadeout animation for Youtube Videos</a>
	</div>
	
	<script type="text/javascript">
	$(document).ready(function() {
		$('.custom-th').click(function() {
			$('.custom-th').fadeOut('slow', function() {
				$("#thevideo").css("display","block");
				});
			});
		});
	</script>
</body>
</html>
Initial URL 
http://blog.pixelthemes.com/ideas/autoplay-youtube-video-while-clicking-on-a-custom-thumbnail-image
Initial Description 
The thumbnails of Youtube videos are generally low in quality.  Sometimes, the thumbnail is not enough to get the people attention.  Here is a small code I have written that works as follows.

A custom thumbnail is displayed at the size of 560px width and 615px height.  When the user clicks on it, the image fade outs.  Yes it will get animated as fade out.  We use jQuery fadeout function for it.  After that the video gets displayed.
Initial Title 
Autoplay youtube video while clicking on a custom thumbnail image
Initial Tags 
jquery
Initial Language 
jQuery