jQuery Fancybox和YouTube嵌入 [英] jQuery Fancybox and YouTube embeds

问题描述

我正在尝试将YouTube嵌入到Fancybox中.我基于Fancybox页面上的代码- http://fancyapps.com/fancybox

I'm trying to get a YouTube embed to open up in a Fancybox. I've based it on the code on the Fancybox page — 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中显示

But each time I click the link, it just opens up the YouTube video full-screen in the same window... not in a Fancybox

我已经检查以确保我的Js文件正在加载并且已经加载，而且在FF控制台中也没有出现错误.

I've check to make sure my Js files are loading and they are, also I'm getting no errors in the FF console.

任何人都可以看到我在做什么吗?

Can anyone see what I'm doing wrong?

推荐答案

如果您使用的是YouTube的embed格式，例如:

If you are using youtube's embed format like :

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

...然后您有三个选择:

... then you have three options :

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

1). Add the special class fancybox.iframe to your link like

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

JSFIDDLE

JSFIDDLE

通知.此 class 是现有的.fancybox class 的补充(是的，带点的格式是可以的)

notice this class is additional to the existing .fancybox class (yes, the format with dot is OK)

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

2). Add the special data-fancybox-type="iframe" attribute to your link like :

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

JSFIDDLE

JSFIDDLE

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

3). Add type: "iframe" to your custom initialization script like :

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

JSFIDDLE

JSFIDDLE

选择所有这些选项(您无需全部设置)

Choose any of those options (you don't need to set all)

这篇关于jQuery Fancybox和YouTube嵌入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！