2013-08-27 4 views
0

Стрелок имеет правильный ответ; однако при первом щелчке ничего не происходит (до второго щелчка). После этого видео не будет загружаться, и я не могу закрыть лайтбокс.играет Vimeo в лайтбокс

Может ли кто-нибудь помочь в настройке?

Вот мой HTML:

<ul> 
     <li><a href="#">album name</a></li> 
     <li><a href="http://vimeo.com/13844810" class="lightbox_trigger" data-videoId="13844810">"Winter"</a></li> 
     <li><a href="#">album name</a></li> 
     <li><a href="#">video name</a></li> 
</ul> 

Вот мой Jquery:

$('.lightbox_trigger').click(function (e) { 
     e.preventDefault(); 

     var videoId = $(this).data("videoId"); 

     if ($('#lightbox').length > 0) { 
      $('#content').html('<iframe src="http://player.vimeo.com/video/'+videoId+'" width="640" height="480" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'); 
      $('#lightbox').show(); 
     } else { 

      var lightbox = 
       '<div id="lightbox">' + 
       '<p>Click to close</p>' + 
       '<div id="content">' + 
       '<iframe src="http://player.vimeo.com/video/'+ 
       videoId + 
      '" width="320" height="240" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>' + 
      '</div>' + 
      '</div>'; 

      $('body').append(lightbox); 
     } 
    }); 

    $('#lightbox').on('click', function() { 
     $(this).hide(); 
    }); 
+0

сделать из модального div jQuery ui http://jqueryui.com/dialog/#modal –

ответ

1

Вы можете использовать конечно существующий плагин лайтбоксе, который поддерживает видео. Но, как кодирование физических упражнений вы можете посмотреть, как я изменил вам лайтбокс играть Vimeo видео во встроенном плеере:

http://jsfiddle.net/rQqVj/2/

  1. Он использует data-videoId атрибут для указания видео идентификатора Vimeo видео играть.
  2. Он использует универсальный плеер с сайта разработчика Player Embedding on Vimeo.
Смежные вопросы