Question

我在网页上有一些视频缩略图。当我点击一个时，我想要一个fancybox打开并播放没有黑条的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。我可以强制进行此更新吗？有没有人有建议？

Answer 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媒体助手

将fancybox调整为vimeo视频大小

1 个答案: