如何在jQuery lightbox (Wordpress)中显示Youtube视频？

Question

我尝试过lightbox-plus，fancybox等。

但是我不知道该怎么做。

这些视频是通过包含Youtube视频的链接发布的图像：

<p><a href="http://www.youtube.com/watch?v=zUN826BdvV4">
<img class="alignnone size-thumbnail wp-image-40" 
title="Screenshot" src="http://localhost/custom-post-type/
wp-content/uploads/2011/01/Screenshot2-150x150.png" 
alt="" width="150" height="150" /></a></p>

例如，Fancybox for Wordpress让我给图片添加一个灯箱，但如果图片链接到Youtube视频，它就不起作用了。

有什么建议吗？

Answer 1

一种简单的方法是使用PrettyPhoto (link to site，link to wordpress plugin)。激活起来很简单：

$('a[rel="prettyPhoto"], .myvideolinkclass').prettyPhoto();

而且HTML非常干净：

<a href="http://youtube.com/a-real-youtube-link" rel="prettyPhoto[youtube]">My Awesome Youtube Video</a>

Answer 2

你看过FancyBox的博客了吗？在Fancybox中有一个YouTube视频的例子：

http://fancybox.net/blog

要导入FancyBox的脚本标记：

<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js">
</script>

绑定点击事件的JavaScript/Jquery：

$("#tip4").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：

<a id="tip4" title="'Zombieland' Trailer"
    href="http://www.youtube.com/watch?v=071KqJu7WVo&amp;feature=player_embedded#at=41">
        Try now
</a>

Answer 3

我想通了how

<div style="text-align: center;"><a class="fancybox" href="#welcomevideo"><img src="http://www.howieolson.com/wp-content/uploads/2010/04/howie-olsen-welcome-video.jpg" width="251px" height="188px" alt="Welcome To High Output"></a></div>

<div style="display:none" id="welcomevideo">
<object width="400" height="300"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=11051269&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&fullscreen=1&autoplay=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=11051269&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&fullscreen=1&autoplay=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="300"></embed></object>
</div>

它似乎可以处理带有内联内容的链接。

(如果有更好的解决方案，请告诉我)。