Question

民间，

我正在尝试使用以下代码在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>

fancybox iframe被调用：

<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。

例如，当用http://www.amazon.com替换YT网址时，亚马逊网页就会很好地加载。使用www.youtube.com（YT索引页面）或www.google.com时，再次加载空白iframe。

我一直在谷歌和stackoverflow上搜索几个小时，但找不到有效的解决方案。

非常感谢。

编辑02/01/2012：Sudhir，tanhuong，JFK，感谢您发布答案。非常感谢。

我使用了JFKs解决方案，效果很好。对不起，作为新手在这里，我无法给你的答案评分。否则我肯定有。

Answer 1

最近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')
 });

我使用当前的嵌入代码和旧的嵌入代码对其进行了测试，它似乎与两者都有效。

Answer 2

尝试：


$("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'}
        });

希望有所帮助

Answer 3

Sudhir的代码很接近但不起作用;用于此场景的正确代码是：

$(".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或{ {1}}以及fancybox中的其他一些特定网站（由于某些广告政策check this for more，他们不希望将其包含在iframe中）...您可以打开自己的网站或外部网页。

Answer 4

我的解决方案：添加＆＃39;输入＆＃39; ：当您调用fancybox（）函数时，＆＃39; iframe＆＃39; 。像这样： $（＆＃34;＃iframe的着陆＆＃34）。的fancybox（{ ＆＃39;类型＆＃39; ：＆＃39; iframe＆＃39; }）;

它有效。希望它有所帮助。

无法在Fancybox中加载YouTube视频 - 空白页

4 个答案: