无法在Fancybox中加载YouTube视频 - 空白页 [英] Can't load YouTube video in Fancybox - blank page

问题描述

Folks，

我正在尝试使用以下代码在fancybox中打开YouTube视频：

I'm trying to open a youtube video in fancybox using the following code:

<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被调用：

The fancybox iframe gets called by:

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

The fancybox pops up just fine. However, when a YouTube video is called, a white blank iframe is displayed.

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

When replacing the YT URL with http://www.amazon.com for example, the Amazon page gets loaded just fine. When using www.youtube.com (YT index page) or www.google.com, again a blank iframe is loaded.

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

I've been searching via google and stackoverflow for hours but couldn't find a solution that worked.

非常感谢帮助。

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

EDIT 02/01/2012: Sudhir, tanhuong, JFK, thanks for posting your answers. Much appreciated.

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

I used JFKs solution which worked great. Sorry, as a newbie here on SO I can't rate your answers. Otherwise I sure had.

推荐答案

Sudhir的代码已关闭但无效;用于此场景的正确代码是：

Sudhir's code is close but won't work; the right code to use for this scenario is:

$(".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

另一方面，如果你想打开外部网站，那么类型是 iframe ，但请记住，您将无法打开 google 或 yahoo 以及fancybox中的其他一些特定网站（由于某些广告政策，他们不希望包含在iframe中，查看此内容以获取更多信息）...您可以打开自己的网站或外部网页。

On the other hand, if you want to open external websites, the right type is iframe, however bear in mind that you won't be able to open google or yahoo and some other specific sites inside of fancybox (they won't like to be contained in iframes due to some ads policies, check this for more )... you may open your own website or external web pages though.

这篇关于无法在Fancybox中加载YouTube视频 - 空白页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！