無法加載中的fancybox YouTube視頻 - 空白頁

我嘗試使用下面的代碼來打開的fancybox YouTube視頻：

<script type="text/javascript">// <![CDATA[ 
    jQuery(document).ready(function(){  
     jQuery("a.video").fancybox({    
       'hideOnContentClick' : false, 
       'width'   : '50%', 
       'height'  : '50%', 
       'autoScale'  : false, 
       'transitionIn'  : 'none', 
       'transitionOut'  : 'none', 
       'type'   : 'iframe' 
     }); 
    }); 
// ]]></script>

的IFRAME的fancybox由被稱爲：

<a class="video" href="http://www.youtube.com/watch?v=L9szn1QQfas"><img title="sometitle" src="http://pathToImage.png" alt="" width="140" height="103" /></a>

fancybox彈出就好。但是，當YouTube視頻被調用時，會顯示一個白色的空白iframe。

例如，當替換YT URL爲http://www.amazon.com時，Amazon頁面加載得很好。當使用www.youtube.com（YT索引頁）或www.google.com時，再次加載一個空白iframe。

我一直在谷歌和計算器上搜索幾個小時，但找不到解決方案。

非常感謝。

編輯02/01/2012：Sudhir，tanhuong，肯尼迪，感謝您張貼您的答案。非常感激。

我用JFKs解決方案工作得很好。對不起，作爲一個新手，所以我不能評價你的答案。否則，我確定。

來源

2012-01-30 josch

你不需要評價答案，只需標記哪一個是你的答案 – JFK 2012-02-02 06:20:55

蘇德赫的代碼是接近，但將無法正常工作;用於此情況下正確的代碼是：

$(".video").click(function() { 
$.fancybox({ 
    'hideOnContentClick': false, 
    'autoScale': false, 
    'transitionIn': 'none', 
    'transitionOut': 'none', 
    'title': this.title, // optional 
    'width': 680, // or your size 
    'height': 495, 
    'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'), 
    'type': 'swf', 
    'swf': { 
    'wmode': 'transparent', 
    'allowfullscreen': 'true' 
    } 
}); // fancybox 
return false; 
}); // click

在另一方面，如果你要打開外部網站，右邊type是iframe，但是記住，你將無法打開google或yahoo和fancybox內部的其他特定網站（由於某些廣告政策，check this for more）他們不希望被包含在iframe中），但您可以打開自己的網站或外部網頁。

來源

2012-01-30 07:39:57 JFK

嘗試：

 

$("a.video").fancybox({ 
      'titleShow'  : false, 
      'hideOnContentClick' : false, 
      'transitionIn' : 'none', 
      'transitionOut' : 'none', 
      'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'), 
      'type'  : 'swf', 
      'swf'  : {'wmode':'transparent','allowfullscreen':'true'} 
     });

希望它可以幫助

來源

2012-01-30 05:53:43

Sudhir，tanhuong，JFK，感謝您發佈您的答案。非常感激。 – josch 2012-02-01 11:55:39

我的解決方案： add 'type'：'iframe'當您調用fancybox（）函數。像這樣： $（「a＃iframe-landing」）。fancybox（{ 'type'：'iframe' }）;

它的工作原理。希望它有幫助。

來源

2012-02-01 09:51:44 tanhuong

最近youtube嵌入代碼已更改，它看起來像這樣： http://youtu.be/zH5bJSG0DZk。方式的fancybox正在看着面前是這樣的：現在

'href' : this.href.replace(new RegExp("watch\\?v=","i"), 'v/')

，那真是用新的嵌入網址工作沒有。花尋找一個解決方案了幾個小時後，我發現在這裏： http://groups.google.com/group/fancybox/browse_thread/thread/e8f81f420eed7c3c/f12af70aded87c2a

基本上，它切換的fancybox調用此：

 
$.fancybox({ 
        'padding' : 0, 
        'type' : 'iframe', 
        'href' : this.href.replace(new RegExp('youtu.be', 'i'), 'www.youtube.com/embed').replace(new RegExp('watch\\?v=([a-z0-9\_\-]+)(&|\\?)?(.*)', 'i'), 'embed/$1?version=3&$3') 
});

我目前的嵌入代碼，老嵌入代碼和測試它它似乎與這兩個工作。

來源

2012-06-04 13:34:27

謝謝。這個鏈接非常有用：https://groups.google.com/forum/?fromgroups=#!topic/fancybox/6PgfQg7tfDw我終於讓我的Fancybox在沒有安裝Flash的情況下在IE9中播放Youtube視頻。 – Ryan 2012-09-21 16:48:43

無法加載中的fancybox YouTube視頻 - 空白頁

回答

相關問題