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

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。

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

我已经通过 google 和 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/')

现在，这并不能真正与新的嵌入 URL 一起使用。在花了几个小时寻找解决方案后，我在这里找到了它： http://groups.google.com/group/fancybox/browse_thread/thread/e8f81f420eed7c3c/f12af70aded87c2a

基本上，它将fancybox 调用切换为：

$.fancybox({ “填充”：0， “类型”：“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

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或yahoo和其他一些特定的fancybox 内的网站（由于某些广告政策，它们不喜欢包含在 iframe 中，check this for more）...不过，您可以打开自己的网站或外部网页。

Answer 3

试试：

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

我的解决方案： 在调用 fancybox() 函数时添加 'type' : 'iframe'。 像这样： $("a#iframe-landing").fancybox({ “类型”：“iframe” });

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