在jQuery的的fancybox打开YouTube视频
题
我可以在开放的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'
});
我不想为每个视频创建新的嵌入对象。
有一些插件,或者其他的方法呢?
解决方案
这是BROKEN,请参见编辑
<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,上述复制
其他提示
我开始在这里使用的答案,但修改了它使用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
});
});
$("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;
});
如果你想自动播放功能添加到它。简单地替换
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',
这有一个正则表达式,以便更容易把刚才复制并粘贴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;
});
感谢名单,亚历山大!
和设置上述YouTube的闪存内容添加花式关闭按钮“WMODE”到“瑞士法郎”参数:
'swf': {'allowfullscreen':'true', 'wmode':'transparent'}
不隶属于 StackOverflow