Advanced Search

Youtube Video in Fancy Box pop up with Thumbnail

/ Published in: HTML
Save to your folder(s)
Add a Youtube video to a page with a dynamically generated thumbnail, when the thumbnail is clicked open the Youtube video in a jQuery Fancybox modal window. Auto play the video and hide related videos at the end

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. ---------------- HTML ------------------
  2.  
  3. <a href = "http://www.youtube.com/embed/BLQFAUvwWrk?autoplay=1&amp;rel=0&amp;autohide=1" class="video_pop_up" rel="galleryVid">
  4. <img src="http://img.youtube.com/vi/BLQFAUvwWrk/0.jpg" width="370" height="250" />
  5. <span class="play">&nbsp;</span>
  6. </a>
  7.  
  8.  
  9. ---------------- CSS - For adding a play button to the video thumbnail ------------------
  10.  
  11. /*-- VIDEO PLAY BUTTON --*/
  12.  
  13. 	a.video_pop_up {
  14. 		position:relative;
  15. 		display:block;
  16. 		}
  17.  
  18. 	a.video_pop_up img {
  19. 		position: relative;
  20. 		z-index: 5;
  21. 	}	
  22.  
  23. 	.play {
  24. 		width: 74px;
  25. 		height: 73px;
  26. 		background: url(/furniture/images/buttons/playbutton.png) no-repeat 0 0;
  27. 		position:absolute;
  28. 		top: 80px;
  29. 		left: 143px;
  30. 		z-index:500;
  31. 		opacity: 0.8;		
  32. 		}	
  33.  
  34. 	.play:hover {
  35. 		opacity: 1;		
  36. 		}
  37.  
  38.  
  39.  
  40. ---------------- FANCY BOX FUNCTION ------------------
  41.  
  42.  
  43.  
  44. 	$("a.video_pop_up").fancybox({
  45. 		'speedIn'		:	600, 
  46. 		'speedOut'		:	200, 
  47. 		'width	'		:	800, 
  48. 		'height'		:	400, 
  49. 		'type'			:	'iframe'
  50. 	});

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.