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.

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

A couple of weeks ago we moved our Philadelphia wedding videography site, to Squarespace a managed hosting and content management system company. While Squarespace has a lot of advantages, it doesn't provide much support for a video intensive site like Bonnie Blink Productions. They have a 20mb upload limit which effectively prevents us from putting any video over a couple of minutes directly on Squarespace. To work around this I employed two methods. One was to upload our shorter videos (under 10 minutes) to ExposureRoom. ExposureRoom is a site optimized for content creators. The quality of their Flash video is quite good and they transcode each video in three sizes (small, medium, and HD). Code for embedding video on your site is provided as well as thumbnails.

There was still the problem of the longer videos (up to 40 minutes). I would need to put them somewhere. Fortunately I still had my account at Dreamhost where the Bonnie Blink Productions website has been for the past six years. Since they have almost unlimited storage and high bandwidth limits, there would no issue with storing and streaming the content from there. Since the www.bonnie-blink.com domain had be pointed to Squarespace, I couldn't reference any content still at Dreamhost. We also own www.bonnieblink.com and www.bonnieblinkproductions.com. These have always redirected to www.bonnie-blink.com. What I did was to make www.bonnieblinkproductions.com a fully hosted domain. Now all the longer videos will be at that URL.

The next step was to set the video up on the Squarespace site. More on that in the next installment.