所以我试图在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'
});
答案 0 :(得分:3)
html
是
<a href="http://www.youtube.com/watch?v=aXC4BORr3jI&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内容本身。