jQuery Fancybox和YouTube嵌入

前端之家收集整理的这篇文章主要介绍了jQuery Fancybox和YouTube嵌入前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正试图让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控制台中也没有错误.

谁能看到我做错了什么?

解决方法

如果您使用youtube的嵌入格式,例如:
<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).在自定义初始化脚本中添加类型:“iframe”,如:

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

JSFIDDLE

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

猜你在找的jQuery相关文章