在Lightbox中播放Vimeo

Question

Strelok擁有正確的答案;然而，第一次點擊沒有任何反應（直到第二次點擊）。在此之後，視頻將無法加載，我無法關閉燈箱。

任何人都可以幫助進一步調整它嗎？

這裏是我的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(); 
    }); 

Answer 1

可以ofcourse使用支持視頻現有的燈箱插件。但作爲編碼練習中，您可以看看我如何修改您的收藏在嵌入式播放器中播放VIMEO視頻：

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

1. 它使用data-videoId屬性來指定VIMEO視頻的視頻ID玩。
2. 它使用Player Embedding on Vimeo開發者頁面中的通用播放器。