Lightbox for YouTube Videos

On one of my recent projects, I needed to embed YouTube videos on a page using a lightbox-type plugin.  Naturally, the first thing I do when confronted with something like this is to hit up Google.  I ended up finding a few different solutions.

First off was Videobox - this is exactly what I wanted -- but ehh, it uses mootools.  Nothing against mootools, its a great little framework - but the whole site where this is going is already using jQuery.

Next I found CeeBox - ahh - exactly what I want.  This guy took Videobox and ported all the best parts over to jQuery.  But, oh wait, it uses the Thickbox plugin.  I forgot to mention that the site is already using the FancyBox plugin for images in other places and I'd like to keep the interface consistent.

Ok, so what I ended up doing was doing the same thing Ceebox did except with Fancybox.  I only added support for YouTube because that is all I needed at the moment (YAGNI, right?).

I think the end result turned out really nice.  All you need to do is include a link to the original YouTube video like so:

<a rel="fancyvideo" href="http://www.youtube.com/watch?v=rP-2ksWFk4o">Pop me up</a>

Then just wire up the script to all links with rel="fancyvideo":

$(document).ready(function() {
    $("a[@rel*=fancyvideo]").fancybox({
        overlayShow: true,
        frameWidth:640,
        frameHeight:360
    });
});

This has the great advantage of gracefully scaling down for browsers with javascript disabled and just providing a link to the video.  For those with javascript enabled, the script automatically detects the link to YouTube (via regex) and handles embedding the video into a nice little popup window.

You can see a demo of it here and get the files here.

Fancybox now supports Youtube videos natively negating the need for the modified fancybox files here.

Chad Lee

Chad Lee

Technical Lead at CivicSource, OSS developer. Expert in distributed systems, REST, messaging, domain-driven design, test-driven development, & CQRS. Beginner dad, novice human.

Read More