jquery - Fancybox无法加载youtube视频

Question

我正在为图片库使用fancybox，并且创建了一个重复页面，但是我没有添加图像文件，而是添加了youTube链接来显示视频，但是单击缩略图时视频不会加载。

js:

$("a.fancy").fancybox({
    'overlayOpacity' : 0.7,
    'overlayColor' : '#000',
    'titlePosition' : 'over',
    'onComplete' : function () {
        $("#fancybox-wrap").hover(function () {
            $("#fancybox-title").show();
        }, function () {
            $("#fancybox-title").hide();
        });
    }
});

html:

<a href="https://www.youtube.com/embed/7h4o08e-uLw" class="fancy" rel="macro-group">youtube</a>
<a href="https://www.youtube.com/watch?v=stPqD4KOT9c&noredirect=1" class="fancy" rel="macro-group">

http://jfastudio.com/video-gallery.html

Answer 1

您要做的是:

将所有youtube的URL转换为以下格式:

https://www.youtube.com/embed/{video id}?{first trailing parameter}&{second trailing parameter}

将iframe类添加到现有的 anchor 定类中，例如

<a href="{URL}" class="fancy iframe" ...

参见 JSFIDDLE

注意:这是用于fancybox v1.3.4。

编辑

如果使用fancybox v2.x，则改为添加类fancybox.iframe。

是的:

class="fancy fancybox.iframe"

...将是正确的。