Posted By

vijayrajesh on 01/12/13

Tagged

jquery

Versions (?)

Last Edited at 01/12/13 06:57am

Statistics

Viewed 985 times

Favorited by 0 user(s)

Related snippets

Autoplay youtube video while clicking on a custom thumbnail image

/ Published in: jQuery

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.

Highlighted TextExpand

<!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>

URL: http://blog.pixelthemes.com/ideas/autoplay-youtube-video-while-clicking-on-a-custom-thumbnail-image

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.