在fancybox jquery中打开youtubevideo

我可以在fancybox中打开youtubevideo吗？

我有一个YouTubevideo链接列表，例如：

<a href="http://www.youtube.com/watch?v=PvbqV8W96D0" class="more">Play</a> 

和fancybox：

 $("a.more").fancybox({ 'titleShow' : false, 'transitionIn' : 'elastic', 'transitionOut' : 'elastic' }); 

我不想为每个video创build新的embedded对象。

有没有插入，或其他方式来做到这一点？

Answer 1

这是破产，看编辑

 <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，则会打开一个youtubeembeddedvideo的fancybox，如果禁用了javascript，则会打开video的youtube页面。 如果你想要，你可以添加

 target="_blank" 

对于每个链接，它不会在大多数文档types上进行validation，但是如果fancybox没有提取，它会在新窗口中打开链接。

编辑

上面this没有被正确引用，所以代码在this下面找不到href 。 你必须这样称呼它：

 $("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所述; ，在上面复制

Answer 2

 $("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; }); 

Answer 3

我开始使用这里的答案，但修改它使用YouTube的新的iframeembedded…

 $('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 }); }); 

Answer 4

如果你想添加自动播放function。 只需更换

 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', 

Answer 5

这有一个正则expression式，因此只需复制并粘贴YouTubeurl就会比较容易。 当您为客户使用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; }); 

Answer 6

Thanx，亚历山大！

要在YouTube的flash内容上方设置幻想closuresbutton，请将“wmode”添加到“swf”参数：

 'swf': {'allowfullscreen':'true', 'wmode':'transparent'}