无法使用FancyBox嵌入YouTube视频

时间:2012-03-19 19:43:17

标签: jquery youtube fancybox

所以我试图在Fancybox弹出窗口中嵌入Youtube视频。但是,它不会加载,只会出现一个空白弹出窗口。

我已将类.fancyYoutube应用于该链接,并已将我的页面链接链接到jquery。

我现在有一个演示站点用于测试目的,您可以在此处找到: http://stevepolitodesign.comlu.com/

不起作用的部分位于“投资组合”部分,位于左下角。

以下是受影响代码的HTML:

<div class="myWork">
 <a href="http://youtu.be/aXC4BORr3jI" class="fancyYoutube">
 <p class="caption">
 <span class="bold">category:</span> <br />
 motion graphics <br /><br />
 <span class="bold">client:</span> <br />
 camp harrington<br />
 </p>
 <img src="images/thumbnails_16.jpg" width="130" height="130" alt="Camp Harrington   Promotional Video"  class="thumbnail"/>
 </a>
</div>

以下是受影响的jquery:

$("a.fancyYoutube").fancybox({
'transitionIn' : 'elastic',
'padding' : 0,
'autoScale' : false,
'transitionOut' : 'fade',
'width' : 680,
'height' : 495,
'type' : 'swf'
});

3 个答案:

答案 0 :(得分:3)

实际上,您网站中的html

<a href="http://www.youtube.com/watch?v=aXC4BORr3jI&amp;feature=channel_video_title" class="fancyYoutube">

如果您想继续使用html,请尝试使用此脚本:

$("a.fancyYoutube").click(function() {
    $.fancybox({
            'padding'       : 0,
            'autoScale'     : false,
            'transitionIn'  : 'none',
            'transitionOut' : 'none',
            'title'         : this.title,
            'width'     : 680,
            'height'        : 495,
            'href'          : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
            'type'          : 'swf',
            'swf'           : {
                 'wmode'        : 'transparent',
                'allowfullscreen'   : 'true'
            }
        });

    return false;
});

请注意,该脚本仅适用于当前的html和fancybox v1.3.4。如果您更改html(或fancybox版本),则可能需要调整脚本

答案 1 :(得分:2)

http://youtu.be/aXC4BORr3jI重定向到http://www.youtube.com/watch?v=aXC4BORr3jI&feature=youtu.be

此页面包含X-Frame-Options:SAMEORIGIN响应标头, 这会阻止页面加载到不同域的框架中。

使用/embed/网址将视频添加到框架中:http://www.youtube.com/embed/aXC4BORr3jI
另一个优点是只显示视频,没有评论,相关视频等。

答案 2 :(得分:0)

我将'type' : 'swf'更改为'type' : 'iframe'并开始工作。当然还有“/ embed /”提示。

这是合乎逻辑的,因为http://www.youtube.com/embed/ ... URL返回HTML代码,而不是SWF内容本身。