Question

所以我试图在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'
});

Answer 1

实际上，您网站中的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版本），则可能需要调整脚本

Answer 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
另一个优点是只显示视频，没有评论，相关视频等。

Answer 3

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

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

无法使用FancyBox嵌入YouTube视频

3 个答案: