Jquery: Simple youtube video gallery with fade effect
Posted: Sat Jun 22, 2013 9:24 am
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?
this is the body of the html code
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*/
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>