Question

Strebk有正确的答案;然而，在第一次点击时没有任何反应（直到第二次点击）。在此之后，视频将无法加载，我无法关闭灯箱。

任何人都可以帮助进一步调整吗？

这是我的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

您可以使用支持视频的现有灯箱插件。但是作为编码练习，您可以看看我如何修改灯箱以在嵌入式播放器中播放vimeo视频：

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

使用data-videoId属性指定要播放的vimeo视频的视频ID。
它使用Player Embedding on Vimeo开发者页面中的通用播放器。

在灯箱里玩Vimeo

1 个答案: