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

Posted 2023-05-09

【中文标题】无法在 Fancybox 中加载 YouTube 视频 - 空白页

【英文标题】：Can't load YouTube video in Fancybox - blank page

【发布时间】：2012-02-22 00:05:02

【问题描述】：

伙计们，

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

fancybox 弹出来就好了。但是，当调用 YouTube 视频时，会显示一个白色的空白 iframe。

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

我已经通过 google 和 *** 搜索了几个小时，但找不到有效的解决方案。

帮助非常感谢。

---

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

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

【问题讨论】：

您无需对答案进行评分，只需标出适合您的答案即可

【参考方案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') );

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

【讨论】：

谢谢。这个链接很有帮助：groups.google.com/forum/?fromgroups=#!topic/fancybox/…我终于得到了我的 Fancybox，可以在没有安装 Flash 的情况下在 IE9 中播放 Youtube 视频。

【参考方案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）...不过，您可以打开自己的网站或外部网页。

【参考方案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' );

希望对你有帮助

【讨论】：

Sudhir，tanhuong，JFK，感谢您发布您的答案。非常感谢。

【参考方案4】：

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

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