我可以在fancybox中打开youtube视频吗?
我有一个youtube视频链接列表,例如:
<a href="http://www.youtube.com/watch?v=PvbqV8W96D0" class="more">Play</a>
和fancybox:
$("a.more").fancybox({
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
我不想为每个视频创建新的嵌入对象。
是否有插件或其他方法可以做到这一点?
答案 0 :(得分:35)
<script type="text/javascript">
$("a.more").fancybox({
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {'wmode':'transparent','allowfullscreen':'true'}
});
</script>
这样一来,如果启用了用户javascript,它会打开一个包含youtube嵌入视频的fancybox,如果禁用了javascript,则会打开视频的youtube页面。如果您愿意,可以添加
target="_blank"
对于您的每个链接,它不会在大多数文档类型上进行验证,但如果fancybox没有提取它,它将在新窗口中打开链接。
this
未正确引用,因此代码在href
下找不到this
。你必须这样称呼它:
$("a.more").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;
});
涵盖在http://fancybox.net/blog#4,在上面复制
答案 1 :(得分:21)
$("a.more").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', // <--add a comma here
'swf' : {'allowfullscreen':'true'} // <-- flashvars here
});
return false;
});
答案 2 :(得分:21)
我首先使用这里的答案,但修改后使用YouTube的新iframe
嵌入...
$('a.more').on('click', function(event) {
event.preventDefault();
$.fancybox({
'type' : 'iframe',
// hide the related video suggestions and autoplay the video
'href' : this.href.replace(new RegExp('watch\\?v=', 'i'), 'embed/') + '?rel=0&autoplay=1',
'overlayShow' : true,
'centerOnScroll' : true,
'speedIn' : 100,
'speedOut' : 50,
'width' : 640,
'height' : 480
});
});
答案 3 :(得分:5)
如果您想为其添加自动播放功能。只需更换
this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
与
this.href = this.href.replace(new RegExp("watch\\?v=", "i"), 'v/') + '&autoplay=1',
你也可以用vimeo
做同样的事this.href.replace(new RegExp("([0-9])","i"),'moogaloop.swf?clip_id=$1'),
与
this.href = this.href.replace(new RegExp("([0-9])","i"),'moogaloop.swf?clip_id=$1') + '&autoplay=1',
答案 4 :(得分:2)
这有一个正则表达式,因此更容易复制和粘贴youtube网址。当您为客户使用CMS时非常适合。
/*fancybox yt video*/
$(".fancybox-video").click(function() {
$.fancybox({
padding: 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 795,
'height' : 447,
'href' : this.href.replace(new RegExp("watch.*v=","i"), "v/"),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : 'true'
}
});
return false;
});
答案 5 :(得分:1)
Thanx,亚历山大!
要设置youtube的flash内容上方的花式关闭按钮,请将'wmode'添加到'swf'参数:
'swf': {'allowfullscreen':'true', 'wmode':'transparent'}