jQuery Fancybox和YouTube嵌入

Question

我正试图让YouTube嵌入在Fancybox中打开.我基于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控制台中也没有错误.

谁能看到我做错了什么？

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

注意这个类是现有.fancybox 类的附加(是的,带点的格式是OK)

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

选择任何这些选项(您不需要设置所有选项)