javascript - 自 iOS6 以来，Fancybox 不显示 YouTube 视频

Question

这是我去年一直在使用的代码。效果很好!

$("#videos a").click(function() {
    if ($(this).hasClass('youtube')) {
        $.fancybox({
            'padding'       : 0,
            'autoScale'     : false,
            'transitionIn'  : 'none',
            'transitionOut' : 'none',
            'title'         : this.title,
            'width'         : $(this).attr('data-width'),
            'height'        : $(this).attr('data-height'),
            'href'          : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
            'type'          : 'swf',
            'swf'           : {
                'wmode'     : 'transparent',
                'allowfullscreen'   : 'true'
            }
        });

        return false;
    }
});

当在 iPad 上使用此代码时，将显示视频。如果无法在 iPad 上观看该视频，您会看到一个带有被划掉的播放按钮的 YouTube 图标。

自 iOS6 以来，这已停止工作。代码中没有任何变化。相反，您现在会看到一个白色的弹出窗口。有人遇到过这个吗？有谁知道原因吗？

我正在使用 Fancybox 1.3.4

Answer 1

为了让您的 YouTube 视频更容易在不同平台上访问，您应该停止使用 http://www.youtube.com/watch?v=3l8MwU0IjMI 格式(它使用 swf 播放器)，但改用 embed 方法(您可以从 youtube 中选择 share 选项卡获取正确的代码)

所以，而不是这个:

<a class="fancybox" href="http://www.youtube.com/watch?v=3l8MwU0IjMI">open youtube video in fancybox</a>

... 这样做:

<a class="fancybox" href="http://www.youtube.com/embed/3l8MwU0IjMI?autoplay=1">open youtube video in fancybox</a>

然后修改你的fancybox(v1.3.4)脚本打开内容type到iframe like

$(".fancybox").fancybox({
 "width": 620, // or whatever
 "height": 420,
 "type": "iframe"
});