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


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.