Advanced Search

Return to Snippet

Revision: 62514
at February 27, 2013 23:21 by i-am-andy
Initial Code 
---------------- HTML ------------------

<a href = "http://www.youtube.com/embed/BLQFAUvwWrk?autoplay=1&amp;rel=0&amp;autohide=1" class="video_pop_up" rel="galleryVid">
<img src="http://img.youtube.com/vi/BLQFAUvwWrk/0.jpg" width="370" height="250" />
<span class="play">&nbsp;</span>
</a>


---------------- CSS - For adding a play button to the video thumbnail ------------------

/*-- VIDEO PLAY BUTTON --*/
		
	a.video_pop_up {
		position:relative;
		display:block;
		}
		
	a.video_pop_up img {
		position: relative;
		z-index: 5;
	}	
		
	.play {
		width: 74px;
		height: 73px;
		background: url(/furniture/images/buttons/playbutton.png) no-repeat 0 0;
		position:absolute;
		top: 80px;
		left: 143px;
		z-index:500;
		opacity: 0.8;		
		}	
		
	.play:hover {
		opacity: 1;		
		}



---------------- FANCY BOX FUNCTION ------------------



	$("a.video_pop_up").fancybox({
		'speedIn'		:	600, 
		'speedOut'		:	200, 
		'width	'		:	800, 
		'height'		:	400, 
		'type'			:	'iframe'
	});
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    
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

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Youtube Video in Fancy Box pop up with Thumbnail

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
HTML