无法加载中的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视频 - 空白页

回答

相关问题