Advanced Search

Autoplay youtube video while clicking on a custom thumbnail image

/ Published in: jQuery
Save to your folder(s)
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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Demo Page For Autoplay youtube video while clicking on a custom thumbnail image</title>
  6. <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>
  7. </head>
  8. <style>
  9. 	body
  10. 	{
  11. 		margin	: 0;
  12. 		padding	: 0;
  13. 		background	: #EEE;
  14. 		color		: #333;
  15. 		font-family: 'Open Sans', sans-serif;
  16. 		font-size	: 12px;
  17.  
  18. 	}
  19. 	#wrapper
  20. 	{
  21. 		width	: 1012px;
  22. 		margin	: 0 auto;
  23.  
  24. 	}
  25.  
  26. </style>
  27. <body>
  28. 	<div id="wrapper">
  29. 		<h1>Demo Page For Autoplay youtube video while clicking on a custom thumbnail image</h1>
  30. 		<div class="custom-th"><img src="http://blog.pixelthemes.com/demo/custom-yt-thumbnail/cusotm-yt-thumbanil.jpg" style="cursor:pointer" /></div>
  31. 		<div id="thevideo" style="display:none">
  32. 		<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>
  33. 		</div>
  34.  
  35. 		<p>Demo by : <a href="http://blog.pixelthemes.com/">WordPress Themes</a> </br>
  36. 		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>
  37. 	</div>
  38.  
  39. 	<script type="text/javascript">
  40. 	$(document).ready(function() {
  41. 		$('.custom-th').click(function() {
  42. 			$('.custom-th').fadeOut('slow', function() {
  43. 				$("#thevideo").css("display","block");
  44. 				});
  45. 			});
  46. 		});
  47. 	</script>
  48. </body>
  49. </html>

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.