Fancybox youtube 回调不起作用

Question

我正在使用以下代码在 fancybox 中打开 YouTube 视频。

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

但是我希望它在 window 出现之前做一些事情。我将在下面包含它。

$("#videos a.fancybox").click(function() {
    $.fancybox({
        'padding'       : 0,
        'autoScale'     : false,
        'transitionIn'  : 'none',
        'transitionOut' : 'none',
        'title'         : this.title,
        'width'         : 1280,
        'height'        : 720,
        'href'          : this.href.replace(new RegExp("watch\?v=", "i"), 'v/'),
        'type'          : 'swf',
        'swf'           : {
            'wmode'             : 'transparent',
            'allowfullscreen'   : 'true'
        },
        beforeShow: function () {
            var id = this.element.attr("id");
            alert(id);               
        }
    });
    return false;
});

基本上它会获取 ID 中的内容并尝试提醒它。使用这段代码，window 将不会打开并将重定向到 youtube。如果我输入类似 alert("ohi"); 的内容，它会正确显示，但我必须删除 var。有人知道为什么吗？如果我将它包含在另一个 fancybox 代码中，它会起作用，例如：

$('#photos a.fancybox').fancybox({
    type: 'iframe',
    beforeShow: function () {
        var id = this.element.attr("id");
        alert(id);               
    }
});

为什么它不适用于视频？

提前致谢。

Answer 1

我建议您忘记 .click() 方法并使用 fancybox 媒体助手。

<script src="{your path}/helpers/jquery.fancybox-media.js"></script>

然后以正常方式将您的选择器绑定到 fancybox。

这是您调整后的代码：

jQuery(document).ready(function ($) {
    $("#videos a.fancybox").fancybox({
        padding: 0,
        // autoScale: false, // not a valid v2.x option
        // transitionIn: 'none', // not a valid v2.x option
        // transitionOut: 'none', // not a valid v2.x option
        // title: this.title, // not needed or it should be inside a callback
        width: 1280,
        height: 720,
        fitToView: false, // to respect the fixed dimensions above (optional)
        helpers: {
            media: true // enable fancybox media helper
        },
        beforeShow: function () {
            var id = this.element.attr("id");
            alert(id);
        }
    });
}); // ready

注意：假设带有 class .fancybox 的选择器也有一个 ID属性，否则会returnundefined

P.S。如果您不想使用媒体助手，您可以即时将 href 更改为 youtube 的 embed 格式，并将 fancbox type 设置为 iframe。检查更多

Fancybox youtube 回调不起作用

Fancybox youtube callbacks not working

jquery

youtube

callback

fancybox

fancybox-2