Archived Content

github.com/chadly

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.

Update

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