将fancybox调整为vimeo视频大小

我在网页上有几个视频缩略图。当我点击一个，我想要一个fancybox打开并播放没有黑条的Vimeo视频，所以纵横比必须是正确的。不幸的是，fancybox无法检测到视频的正确宽度&。将fancybox调整为vimeo视频大小

我写了一些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。我可以强制这个更新吗？有没有人有建议？

来源

2014-10-19 JSS

'this'内'done'回调ISN”指的是fancybox实例。最简单的方法是使用引用变量：'beforeLoad：function（）{var self = this;'然后在完成的回调中使用'self' – 2014-10-19 14:06:50

工程就像一个魅力！谢谢 – JSS 2014-10-19 14:14:52

试试这个：（获取数据，然后再打开的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媒体帮手

来源

2015-09-18 11:20:38 l2aelba

将fancybox调整为vimeo视频大小

回答

相关问题