在灯箱中播放 Vimeo答案

【问题标题】：playing Vimeo in a Lightbox在灯箱中播放 Vimeo
【发布时间】：2013-08-27 01:40:40
【问题描述】：

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();
   });

【问题讨论】：

让你成为模态div jQuery ui jqueryui.com/dialog/#modal

标签： jquery lightbox vimeo

【解决方案1】：

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

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

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

【讨论】：