Youtube視頻不工作在ipad fancybox時使用jquery.fancybox-media.js

Question

我試圖在fancybox內使用youtube視頻與響應功能，以便它可以根據設備調整其尺寸，我已經使用jquery .fancybox-media.js，它在桌面上運行良好，但視頻不能在iPad上播放。

訪問http://fancyapps.com/fancybox/然後點擊Youtube（iframe），它只能在桌面上播放，但不能在iPad上播放。

它採用jquery.fancybox-media.js

Answer 1

由於的fancybox 2.1.0版本存在，使您可以預加載的iframe內容的iframe API選項;默認值是true。

不幸的是，由於jQuery v1.9 +我看到這個選項以某種方式在嘗試顯示iframe內容時，特別是在流式媒體或PDF文檔中出現問題。

作爲解決方法，我已禁用iframe預加載，並已修復許多報告的問題。

的fancybox使用iframe型YouTube視頻，但他們的主頁仍然使用默認值（true），但是在自己的網頁，你應該禁用此選項，你的YouTube視頻將在iPhone/iPad上運行沒有問題：

這例如

<a class="fancybox" href="http://www.youtube.com/embed/3l8MwU0IjMI?wmode=opaque&autoplay=1">show youtube in fancybox</a> 

hrml ...這個腳本

jQuery(document).ready(function($) { 
    $(".fancybox").fancybox({ 
    width: 620, // or whatever 
    height: 420, 
    type: "iframe", 
    iframe : { 
     preload: false 
    } 
    }); 
}); // ready 

...應該工作得很好。

注意的autoplay=1參數不會在移動設備上工作，所以你仍然需要click在視頻開始（這是有意義的我，因爲你可能不希望無意中浪費你的數據計劃）

見JSFIDDLE在iPad上）

編輯：如果你不希望有一個固定的大小iframe（響應速度），那麼就擺脫了大小選項，如：

jQuery(document).ready(function($) { 
    $(".fancybox").fancybox({ 
    type: "iframe", 
    iframe : { 
     preload: false 
    } 
    }); 
}); // ready 

看到iPad的