jQuery Fancybox和YouTube嵌入

Question

我正在尝试在Fancybox中打开一个YouTube嵌入视频。我基于Fancybox页面上的代码进行了修改 - http://fancyapps.com/fancybox 以下是我所拥有的代码：

<a class="various fancybox" href="https://www.youtube.com/embed/jid2A7ldc_8?autoplay=1">Youtube (iframe)</a>

然后在 call.js 文件中。

$(document).ready(function() {

    $(".various").fancybox({
            maxWidth    : 800,
            maxHeight   : 600,
            fitToView   : false,
            width       : '70%',
            height      : '70%',
            autoSize    : false,
            closeClick  : false,
            openEffect  : 'none',
            closeEffect : 'none'
        });
})

但每次我点击链接时，它只是在同一个窗口中全屏打开YouTube视频...而不是在Fancybox中。
我检查过我的Js文件是否加载，它们确实加载了，而且我在FF控制台中没有看到错误提示。
有人能看出我错在哪里吗？

- user1049944

Answer 1

如果您正在使用Youtube的 embed 格式，例如：

<a class="various fancybox" href="https://www.youtube.com/embed/jid2A7ldc_8?autoplay=1">Youtube (iframe)</a>

...那么您有三个选项：

1). 将特殊类fancybox.iframe添加到您的链接中，例如：

<a class="various fancybox fancybox.iframe" href="https://www.youtube.com/embed/jid2A7ldc_8?autoplay=1">Youtube (iframe)</a>

JSFIDDLE

注意：这个class是额外添加到现有的.fancyboxclass中的（是的，带点的格式没问题）

2). 将特殊的data-fancybox-type="iframe"属性添加到您的链接中：

<a class="various fancybox" data-fancybox-type="iframe" href="https://www.youtube.com/embed/jid2A7ldc_8?autoplay=1">Youtube (iframe)</a>

JSFIDDLE

3). 将type: "iframe"添加到您的自定义初始化脚本中，例如：

$(".fancybox").fancybox({
    type: "iframe",
    // other API options
})

JSFIDDLE

选择其中任意一个选项（您不需要设置全部）

- JFK

---

太棒了，谢谢！我记得在演示页面上看到过 fancybox.iframe ... 只是我不知道那实际上会影响它的工作方式！不过我想我会选择 data-fancybox-type 属性。 - user1049944

讲解得非常清楚！谢谢！ - Diego Somar