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 类的补充（是的，带点的格式正常）

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

选择其中任何一个选项（您不需要设置所有选项）

jQuery Fancybox和YouTube嵌入

1 个答案: