Shadowbox Enabled

So I’ve always wanted to enable streaming/playing hd videos in your browser and have been asked if that was possible many times. However, I also wanted to maintain the downloadable aspect of it.

Awhile back, I was played around with Cooliris (previously known as PicLens), however the only video type it supported was Flash. I sent them an email, but they said they were working on it. I believe they still do not support Quicktime movies yet.

I was also playing with Lightbox, but mainly for my photo gallery. It was cool in the fact I can enlarge an image and darken the screen behind it. So while fixing up some random issues on my site today, I decided to see if Lightbox supported video. Unfortunately they don’t:

Can I display flash, video, or other content using the script?

Sorry, photos only. For other content, google for Lightbox modifications or try an alternative script such as Cody Lindley’s ThickBox.

I searched online and found a few that did: Lightview, Lightwindow, mediabox, and Shadowbox.

Lightview looked really nice with the rounded corners, but unfortunately it wasn’t free. If there’s demand to improve to this feature, I might consider switching to it in the future.

Lightwindow did not work in Firefox 3 for some reason. Worked fine in IE7.

mediabox is actually my favorite. It auto-resizes the window to fight the video player snuggly. However, they didn’t have a download package and the installation steps weren’t easy to follow. I was going to invest some time in understanding what I needed to do, but then I found…

Shadowbox works right out of the box and contains simple examples. Unfortunately it doesn’t have the auto-resize thing and seems to stretch the video player to fit the height/width I specify for the frame.

I initially was hitting into the issue where it wouldn’t detect Yahoo’s trailers as Quicktime movies, since they end in .dll. However, I was able to specify player=qt in the rel attribute, and things are working fine now.

With this, I don’t have to modify the existing href to the actual trailer and people can still right click and save the trailer onto their hard drive. What Shadowbox enables is if you’re just browsing and just want to watch some HD trailers in your browser, this has become simple.

If anyone hits into issues, please do let me know.

Turns out I was mistaken about mediabox’s auto-resizing. I finally managed to grab all the files I needed. I’ve uploaded it to zSHARE if you’re interested with playing with it: mediabox Version 0.7.3. It does add a black border around the video player, which I like. I also had to modify the code to set the backcolor attribute for the embed object. Since I didn’t know what the exact dimension of these videos are, it was filling in the extra spacing with a blinding white color. Finally, I added .dll as an extension that should use the Quicktime code path.

Not too sure which one I like more. Going to stick with mediabox for now.

New Changes to Site

If you haven’t noticed yet, I’ve been making changes to the main site over the last few days.

First, I’ve gotten rid of the LightBox (SubModal) and made each trailer an individual page with it’s own header and links. I did this due to several factors. First, depending on the description, it was hard to judge how big to make the modal window. Then there was the fact that people would share links directly to the individual trailers page (which is expected) and it’s hard to discover how to get back to the main site to see more trailers. The experience just wasn’t ideal.

Next I’ve removed the Digg scripts from both the main indices (plural of index) as well as the individual trailer pages and gone with a simpler link sharing code I borrowed from Sociable. You’ll notice that the blog also has this feature enabled. Sociable is a WordPress plug-in, but I just borrowed the code and used it on the main page. I may implement my own voting system later in the future, but for now, that’ll remain on my TO-DO list.

Then there was the navigational changes. First I now have giant left and right arrows for navigating between index pages, while removing the navigation links that used to be below the trailer images. Next, on every individual trailer page, you’ll see links to the next and previous trailers, so you can continue browsing without having to go back to the index. At first I wanted to do arrows on these pages as well, but I also wanted to provide some visual hint to what the next trailer is. I haven’t found a good way to merge an arrow with the trailer image yet, but when I do, you’ll see it.

You’ll also notice the next/previous links on the individual trailer pages to be stationary. The reasoning for this is that if I just want to quickly go through trailers, I won’t have to move my mouse to where the next link is to continue. I’ve always hated sites that didn’t have a stationary next/previous links.

I also changed around how the tables were laid out. Apparently the <tr> no longer supports the height attribute and for some reason the cell heights are automatically assigned. I was able to hack it in Firefox by creating a giant cell that pushes things up, but IE7 just didn’t like whatever I threw at it. Now I’ve just merged the title and descriptions into 1 giant cell so I won’t hit this weird problem.

More changes will come later as I find some more free time.