Working through VideoBox

Que the Mission Impossible music...

Dah dah dahn nah, dah dah dahn nah
Dah dah dahn nah, dah dah dahn nah, etc.

My mission this week, and I chose to accept it, was to work through and then review a user contributed tutorial from the forum. Judging by all the forum questions inquiring about Lightbox, LightWindow, Slimbox, graybox, thisbox and thatbox, I thought a tutorial involving one of them might be a good one to work through. On my sites I use either the built in Lighbox triggers of Loghound's excellent PlusKit or one of the templates included with Scott Mackie's wonderful RapidAlbum but there are many folks who don’t use those so I thought this would be a good area to work in. Plus, I’d previously not tried to integrate any kind of “box” effect with video.

The tutorial I worked through was done on VideoBox and posted by kbbrux. On the main tutorial page kbbrux posted a basic introduction including a link to where you can download the necessary VideoBox files as well as a bit javascript code that needs to be copied and pasted into your project. kbbrux’s post then links to the actual tutorial, a screen cast he has hosted on his own site.

He starts out stating that he’s using RW’s Alpha theme and that he’s been able to get this to work with Silk as well. Well of course using a stock RW theme just isn't good enough for me. I have to muddy the water and use the theme I’m currently playing around with, Henk Vrieselaar’s gorgeous Vertical Image 1 theme. I generally have a test site already made up that I switch themes around on, install and play with new plug-ins, snippets, etc. It so happens that I’d just bought Vertical Image so that was the theme loaded on my test site.

I watched the screen cast all the way through once and then went back and started it over, following along on my own test site. To get VideoBox to work with RapidWeaver is very simple (or so it seemed). First, I download the VideoBox file kbbrux had linked to in tutorial post on the forum. The file came zipped and when decompressed contained a single video folder. This folder and all it’s contents needed to be placed into the themes Css folder so I right-clicked on the theme in the theme drawer, made a duplicate and then right-clicked on the duplicate theme to “Show Contents.” Once the folder contents window opened I dropped the video folder into the Css folder.

Out of curiosity I opened up Vertical Image's Css folder just to see what all was in there. In kbbrux’s video tutorial he was using Alpha and there where three other subfolders in the Css folder. Not so with Vertical Image which had no less than 24 folders. Hmmm..... What are the odds of this working without a hitch and not conflicting with any of those other files?

The next step was to copy the javascript code kbbrux had posted in the tutorial and then to paste that in the Custom Header box in the Page Inspector. Why it goes in there and not in the custom Javascript or CSS box I have no idea. Bear in mind I know little html and absolutely NO Css, Javascript or any other kind script for that matter. One of these days I WILL work all the way through Sundog's RWcss book... One of these days...

Next it was time to actually add the video file to my page. First, you have to add the video to the page as an asset, which I did. Once again, however, I veered off course from the tutorial and attached the video to text I had entered into a Text Block. kbbrux used a Styled Text page. In the Add Link dialog box, I named the link, pointed it at the video file asset and in the rel box typed in vidbox 640 480 as the tutorial instructed.

This is where things went bad. When I previewed the page VideoBox opened up but my video didn’t play. I published the site anyway hoping that might fix things but it didn’t. I figured for sure that my straying from the tutorial by using a different theme and a block page was the cause of my troubles so I started again from scratch using Alpha and a plain old styled text page. Same result! What the heck?

In the tutorial, kbbrux used a .mov file and the file I was trying to use was a .mp4 file. Could that be the problem? My dog knows more about JavaScript, Css and html than I do so I wasn’t about to open up the page in an editor to troubleshoot. Its all greek to me and I wouldn’t know what I was looking at anyway. Instead I recorded a new screen capture movie but made sure to save it as a .mov file. To keep things tidy, I placed the video in the same folder as the one I’d stored the original .mp4 file and proceeded to repeat the tutorial. Still no joy!

What had I done? I’d run (quickly) out of troubleshooting ideas. Out of sheer desperation and unwilling to admit defeat I dragged the video file to my desktop. I don’t know why I did that, I just did. I guess I figured it couldn’t make anything worse. I re-added the file via the Assets window and previewed one last time. It worked! I then tried it in Vertical Image and it worked there too although the VideoBox window opened up kind of behind the sidebar nav menu.

I have no idea why it worked but I will tell you the folder I kept the .mp4 in originally is four levels down in my Documents folder. My theme test file is in a different folder altogether so it’s not that the video file has to be in the same folder as the RW file. I still have no idea why this makes a difference but I’m happy I finally got it to work.

All in all it was a fun and quick tutorial to work through (at least it’d be quick for most people). The only thing I’d change is that when kbbrux is typing in the Add Link drop-down sheet, it’s very hard to see what he’s actually typing. The screen cast seemed to be sized approximately 640 X 350 which would be okay if the camera was zoomed in a little more on the action. As it is the whole RapidWeaver screen is shown. A slightly larger movie or more zooming would make this screen cast easier to watch.

Other than that, the tutorial is short, concise and easy to follow and it adds a really nice effect to videos you might post on your own site. After having failed in my first couple attempts, things went smoothly and as planned as soon as I moved my movie file to the desktop. Not sure why I had to do this and it certainly wasn’t kbbrux's fault.

Speaking of kbbrux, he’s posted eight other screencast tutorials on his site. They’re all equally informative and well done. You can check them out on his RapidWeaver screen-casts page. Thanks kbbrux!