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>