Fancybox 不加载 youtube 视频

【问题标题】：Fancybox not loading youtube videoFancybox 不加载 youtube 视频
【发布时间】：2014-12-20 19:36:04
【问题描述】：

我在我的图片库中使用了 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

【问题讨论】：

标签： jquery youtube fancybox

【解决方案1】：

你要做的是：

将所有 youtube 的 URLs 转换为这种格式：

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

将 class iframe 添加到您现有的锚 class 喜欢
```
<a href="{URL}" class="fancy iframe" ...
```

见JSFIDDLE

注意：这是为fancybox v1.3.4 准备的。

编辑

如果使用fancybox v2.x，则添加class fancybox.iframe。

是的：

class="fancy fancybox.iframe"

... 是正确的。

【讨论】：