Video Page Design

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.

 

 

About Alastair McDermott

Alastair McDermott is an online business and technology consultant specialising in web design & development, internet marketing and search engine optimisation. He has been building websites and software since 1996 and is a ten year veteran of using WordPress.

Alastair blogs and makes media of all kinds at WebsiteDoctor. Follow him on Twitter at @WebsiteDoctor.
Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *