带有 fancyBox 的视频库

Question

我正在尝试在网页上创建视频库。

我选择了 fancyBox。我已经开始工作了。但是我有两个问题。

第一个：
我希望列表中的第一个视频在页面呈现后立即显示。

第二个：
我不希望视频自动启动。我希望用户手动启动它们。

这是 fiddle 上的工作代码：

http://jsfiddle.net/Xh3B2/

例如见下图

但是目前，您需要在第一个视频显示在页面上之前单击 link。即

我的代码；

视频 #1

视频 #2

function videoFancyBox()  {                     
    $(".fancybox")
        .attr('rel', 'gallery')
        .fancybox({
            openEffect  : 'none',
            closeEffect : 'none',
            nextEffect  : 'none',
            prevEffect  : 'none',
            padding     : 0,
            margin      : [20, 60, 20, 60] // Increase left/right margin
        });
 }

更新： 肯尼迪亲切地回答了问题一；我只需要将它放在 hte 代码的末尾：.eq(0).click();

但是，我仍然无法自动启动视频；我将 link 中的一个参数更改为

 autoplay= 0;

但是视频在加载后仍然运行

<a class="fancybox_video fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=0&enablejsapi=1&wmode=opaque">Video #1</a>

Answer 1

视频播放器自动启动禁用将autoplay=1更改为autoplay=0 ...

http://www.youtube.com/embed/L9szn1QQfas?autoplay=0&wmode=opaque

Answer 2

第一个问题，只需在您的 fancybox 初始化脚本末尾添加 .eq(0).click()，例如

$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        // API options
    })
    .eq(0).click();

方法 .eq(0) 以第一个（索引 0）选择器 .fancybox 为目标，方法 .click() 触发程序化 click 在页面加载后。

对于第二个问题，按照@user10

的建议将尾随参数autoplay更改为0即可

带有 fancyBox 的视频库

video gallery with fancyBox

jquery

fancybox