将 fancybox 调整为 vimeo 视频大小答案

【问题标题】：Resize fancybox to vimeo video size将 fancybox 调整为 vimeo 视频大小
【发布时间】：2014-12-14 14:06:17
【问题描述】：

我的网页上有一些视频缩略图。当我单击一个时，我想要一个花式框打开并播放没有黑条的 Vimeo 视频，因此纵横比必须正确。不幸的是，fancybox 无法检测到视频的正确宽度和高度。

我写了一些 jquery 代码，但我卡在最后一步：

var $height = screen.height/2;
var $aspectRatio = 16/9; // Default aspect ratio
var $width = $aspectRatio * $height; // Default width

$('a.fancybox-media').fancybox({
    openEffect  : 'none',
    closeEffect : 'none',
    width : $width,
    height : $height,
    autoDimensions : false,
    beforeLoad : function() {
        var $vimeoVideoID = jsTheme.fancybox.getVimeoId(this.href);

        $.getJSON('http://www.vimeo.com/api/v2/video/' + $vimeoVideoID + '.json?callback=?', {format: "json"}, function(data) {
            // Calculate aspect ratio & new width
            $aspectRatio = data[0].width / data[0].height;
            $width = $aspectRatio * $height;
        }).done(function() {
            // Resize fancybox to this width & height. Doesn't work!
            this.width = $width; 
            this.height = $height;
        });
    }
});

我可以调用 API 并从 Vimeo API 检索宽度和高度。我根据这个纵横比计算新的宽度。但我无法设置宽度。即使我在done 函数中硬编码宽度，如this.width = '3000' 它不会更新fancybox。

如果我将 this.width = '3000' 放在 done 函数之外，它会起作用。好像我无法从 done 函数更新 fancybox。我可以强制更新吗？有人有什么建议吗？

【问题讨论】：

this inside done 回调不是指fancybox实例。最简单的方法是使用引用变量：beforeLoad : function() { var self = this; 然后在完成回调中使用self
像魅力一样工作！谢谢

标签： jquery fancybox vimeo

【解决方案1】：

试试这个： （先获取数据，然后打开 Fancybox）

var id = 132693003;
$.ajax({
    dataType: 'json',
    url: 'http://www.vimeo.com/api/v2/video/' + id + '.json?callback=?',
    success: function (json) {
        var w = json[0]['width'];
        var h = json[0]['height'];
        $.fancybox.open({
            width: w,
            height: h,
            maxWidth: 1240,
            padding: 0,
            type: 'iframe',
            aspectRatio: true,
            scrolling : 'no',
            href: '//player.vimeo.com/video/' + id + '?color=d50000&autoplay=1&hd=1&show_title=0&show_byline=0&show_portrait=0&fullscreen=1'
        });
    }
});

PS：没有 Fancybox 媒体助手

【讨论】：