jQuery Fancybox 和 YouTube 嵌入

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/27193010/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 11:22:07  来源:igfitidea点击:

jQuery Fancybox and YouTube embeds

jqueryyoutubefancyboxembedfancybox-2

提问by pealo86

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

我正在尝试让 YouTube 嵌入在 Fancybox 中打开。我已经基于 Fancybox 页面上的代码 - http://fancyapps.com/fancybox

Here is what I have:

这是我所拥有的:

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

And then in call.js

然后在 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'
        });
})

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

但是每次我点击链接时,它都会在同一个窗口中全屏打开 YouTube 视频......而不是在 Fancybox

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

我已经检查以确保我的 Js 文件正在加载并且它们正在加载,而且我在 FF 控制台中也没有收到任何错误。

Can anyone see what I'm doing wrong?

谁能看到我做错了什么?

回答by JFK

If you are using youtube's embedformat like :

如果您使用的是 youtube 的embed格式,例如:

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

... then you have three options :

...那么你有三个选择:

1). Add the special class fancybox.iframeto your link like

1)。将特殊课程添加fancybox.iframe到您的链接中,例如

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

JSFIDDLE

JSFIDDLE

noticethis classis additional to the existing .fancyboxclass(yes, the format with dot is OK)

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

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

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

JSFIDDLE

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

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

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

JSFIDDLE

JSFIDDLE

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

选择这些选项中的任何一个(您不需要全部设置)