jQuery Fancybox 和 YouTube 嵌入

Posted 2023-03-13

【中文标题】jQuery Fancybox 和 YouTube 嵌入

【英文标题】：jQuery Fancybox and YouTube embeds

【发布时间】：2015-01-27 08:52:39

【问题描述】：

我正在尝试嵌入 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 控制台中没有收到任何错误。

谁能看出我做错了什么？

【参考方案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

notice这个class是对现有.fancybox的附加class（是的，带点的格式是可以的）

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

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

【讨论】：

非常感谢！我实际上记得在演示页面上看到了fancybox.iframe...只是我不知道这实际上影响了它的工作方式！虽然我认为我会选择data-fancybox-type 属性

解释得很好！谢了！