Jquery: Simple youtube video gallery with fade effect

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
D_zone
Forum Newbie
Posts: 14
Joined: Mon Nov 02, 2009 9:22 am

Jquery: Simple youtube video gallery with fade effect

Post by D_zone »

I got a bit of a problem, I created it a simple video gallery with a playbutton. I got the fade effect working well with images BUT it will not load the specific video.

This is the jquery code. Any suggestion?

Code: Select all

// JavaScript Document
$(document).ready(function(){
	
	$('a.video_link').each(function(){
		
		var thumbnailFilePath = 'video/' + $(this).attr('videofile') + '-tn.jpg';
		var videoCaption = $(this).attr('videocaption');
		
		$(this).css('background-image','url('+thumbnailFilePath+')');
		$(this).html('<div class="caption">'+ videoCaption + '</div>');
		
		});
		
	
	
	
	$('.video_link').click(function(){
	
	
		
		var videoImage = 'video/' + $(this).attr('videofile') + '.jpg';				
		var imageCode = '<img src="'+videoImage+'" />';
		
		
		
		$('#VideoPlayer').fadeOut(0, function(){									
		
		
		
		
		$('#VideoPlayer').css('background-image','url('+videoImage+')');
		$('#VideoPlayer').html('<img class="playButton" src="images/playicon.png" />');
		$('#VideoPlayer').fadeIn(700);											
		});
		
		
		
		
		
		$('.playButton').click(function(){
			
			
		var videoName =  $(this).attr('videofile');
		var videoCode = '<iframe width="600" height="400" src="http://www.youtube.com/embed/'+videoName+'?autoplay=1" frameborder="0" allowfullscreen></iframe>';

		
		if (videoName = (videoImage - ".jpg")){
			$('#VideoPlayer').html(videoCode);
		}
		
		});
		
	
		
		
		
		});
		

		
});/*End all*/
this is the body of the html code

Code: Select all


<body>
<div class="video_gallery_conteiner">
<a class="video_link" videowidth="640" videoheight="360" videofile="youtube_video_embed_name" videocaption="video 1"></a>
<a class="video_link" videowidth="640" videoheight="360" videofile="x2SPn8-SBdU" videocaption="video 2"></a>
<a class="video_link" videowidth="640" videoheight="360" videofile="t36tnz5kVCY" videocaption="video 3"></a>
<div class="clearboth"></div>
</div>


<div id="VideoPlayer" >

</div>

</body>


Post Reply