There are several ways to display images on the web, but Lightbox took the portfolio world by storm. Lightbox is an incredibly simple way to show-off images in a classy way with an easy user-experience.

Recently, I needed to have the same presentation for HTML5 video, so I went hunting for a decent plugin for jQuery (a framework for making interaction design on the web easy). I settled on one called prettyPhoto, which didn’t actually do what I needed, but was versatile enough that I figured I could adapt it.

prettyPhoto, despite its name, provides a great way to display several different formats in a Lightbox-like style, not just photos. It supports images, text, other websites, and several different video formats: Vimeo, YouTube, and .mov embedding. No HTML5 video support, though. So I decided to take things into my own hands.

I’m not a JavaScript whiz by any means, but prettyPhoto was remarkably simple to decipher, so it wasn’t long before I had some decent results.

How Does It Work?

There are some prerequisites before one can use prettyViddy. (Note, these are only prerequisites for webmasters; the user only needs JavaScript enabled—it is, by default—to see the results):

  • jQuery—This is necessary whether you’re using Lightbox or regular prettyPhoto.
  • Flowplayer, or some kind of Flash video player. If you’re not using Flowplayer, some retooling of the code will be needed. prettyViddy uses Kroc Camen’s Video for Everybody technique, and tries to keep in the same spirit (more on that later).
  • Video in both mp4 and ogv formats. (As Google’s webm gains steam, this, too, is likely to be incorporated later).
  • A cover or poster image to show at the beginning of the video. All of the video’s components—the mp4, ogv, and jpg poster image must be named exactly the same.

When a user clicks on a link to a video, instead of downloading it, an overlay will appear on the page, and the video will be sized and centered appropriately. Declaring the video size is required, otherwise prettyPhoto relies on the defaults, which can cause some bad rendering. Size is declared as a pair of variables at the end of the link.

Here is how some code might look:

<a href="/graphics/sample-video.mp4?width=400&height=295" rel="prettyPhoto">Watch a video.</a>

prettyViddy keeps in the spirit of Video for Everybody by supplying ample fallbacks so that everybody has the chance to see the video, no matter what brand of technology he or she chooses. This means that older browsers that don’t support HTML5 video will get a Flash player, and users that don’t support Flash will have the option to just download the video. Since prettyViddy uses jQuery, and therefore relies on JavaScript, the fallback isn’t 100% bulletproof, but it’s close; if JavaScript is disabled, the link will simply prompt the user to download a single format: either mp4, ogv, or potentially webm. I’m betting on mp4, since it will have the support of Apple, Google, and Microsoft.

Lend Me a Hand

prettyViddy is a basic update to prettyPhoto, and it may still have some bugs or be lacking in desired features. Feel free to let me know what I can do to make the code better. In particular, I haven’t tackled detecting video size automatically, which would be ideal.