將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視頻大小

回答

相關問題