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

However I could not figure how to get it done.

Individuals videos are images posts having a link that contains 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 instance, allow me to give a lightbox to images, but when the look links to some Youtube video it does not work.

Any suggestions?

An easy method of doing this is to make use of PrettyPhoto (link to site, link to wordpress plugin). It is possible to activate:

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

And also the HTML is fairly clean:

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

I determined 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 appears enjoy it works together with links with inline content mounted on it.

(Please tell me if there is a better means to fix this).

Take a look at this list

Some highlights:

  • Floatbox Plus
  • LightView Plus

Perhaps you have seen the FancyBox Blog? There's a good example there of the YouTube video inside 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>