Getting web video working on our Squarespace site - Part 2.

As I mentioned in the previous post, we are now using Squarespace for the Bonnie Blink Productions website. Because Squarespace is not currently optimized for video, we are using embedded video from ExposureRoom for our short clips, and hosting our longer videos at our old hosting provider.

I prefer having an "Lightbox" type window with the embedded video to open when the users click a link rather than embedding directly into the page. Squarespace provides an easy way of adding Javascript and CSS code to the site through "code injection" points (CSS can also be added on a template wide basis). The Javascript lightbox utility that I used is MediaBoxAdvanced. It is quite flexible and allows almost any type of image, media player or html page to be displayed as a lightbox. MediaboxAdvanced also has a nice way of creating galleries which the user can select the next or previous image/video/page by clicking the appropriate link.

I decided that since I wanted to add a detailed description of each video, that I would create a plain html page with the embed code for either the ExposureRoom Flash player or the JW FLV player for the longer clips. I call Mediabox from inside the anchor tag like this:

rel="lightbox[med 670 550]" href="/storage/html/Johnston_Trailer.html"

This has Mediabox display the html page containing the embedded video and text. The three parameters inside the brackets are the gallery name (med) and the dimensions of the lightbox. There are several videos that are in the "med" gallery, both ExposureRoom and those served through FLV player.

To see how this looks click on the image on the left side of our homepage.