How to display Youtube videos in a jQuery lightbox (Wordpress)?

I tried lightbox-plus, fancybox, etc...

But I couldn't figure how to do it.

Those videos are images posts with a link containing a Youtube video:

<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, for example, let me add a lightbox to images, but if the image links to a Youtube video it doesn't work.

Any suggestions开发者_如何转开发?

A simple way to do this would be to use PrettyPhoto (link to site, link to wordpress plugin). It is simple to activate:

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

And the HTML is pretty clean:

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

Have you seen the FancyBox Blog? There is an example there of a YouTube video in a Fancybox:

http://fancybox.net/blog

Script tag to import FancyBox:

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

JavaScript/Jquery to bind click event:

$("#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>

I figured out 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>

It seems like it works with links with inline content attached to it.

(Please let me know if there's a better solution to this).