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

注意这个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

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

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

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

JSFIDDLE

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

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

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