Posted By

vijayrajesh on 01/12/13


Tagged

jquery onclick YouTube autoplay


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

Josueriv


Autoplay youtube video while clicking on a custom thumbnail image


 / Published in: jQuery
 

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

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.

  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>

Report this snippet  

You need to login to post a comment.