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.
How Does It Work?
- 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>
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.