Video player is width of main content column
We’re at the stage where we’re uploading loads of video content that we’ve produced up to our video content delivery provider (BitsOnTheRun – they rock). One really important thing I’ve been working on is the design of the video page template. This is the page that our customers are going to spend most of their time on, viewing training videos, so it’s crucial that they are well laid out and are very usable.
You can see the first style of video page here – this page doesn’t have a wide screen video, although the player can be viewed in fullscreen. The player window is quite small though, and our HD 1280x720px video doesn’t look at it’s best in this size of window.
Video player is full width of site
Another option is to move the side column down below the video and have the player full width of the main column (in our case, 960px). I’ve done that in the following page template, and I think this is the main design that we’re going to use. We will still be able to offer smaller video resolutions, for quicker download speed, and the fullscreen button still works, even if you’re on a lower resolution screen than our page width. BitsOnTheRun have some interesting options for “BitRate Switching” where they autodetect resolution and/or available bandwidth, and deliver the most appropriate video to the browser for that connection.
For the moment I’m going to make the full width player the default design, but I’ll be making the partial-width an option at some point later, after we open the doors.
In my next blog post I’ll describe how I’ve used WordPress custom post types to store our videos with lots of cool meta-content in the WordPress database.
