Last week Brightcove had an internal hack week where everyone could work on any project they wanted. One of the projects that came out of that was a new video.js skin designer.

The designer allows you to watch changes happen to the skin live as you edit the CSS, making it easier to create a custom look.

Check out this familiar looking example that was done in just a few minutes.

Try creating your own and let us know what you think. Better yet, create your own, share it on CodePen.io and post a link in the comments. (It’s probably easiest if you start by forking this unedited example.)

One of my favorite things about video.js is that the skins are built in HTML and CSS, while working across both HTML5 and Flash video. I think this designer does a nice job of showing off how easy that makes it to customize a player’s skin.

Some notes on how we built it…

As a starting point we used Brian Frichette’s awesome LESS2CSS, which gave us a huge head start. Brian has offered to help with the skin designer as well, so that’s great!

We haven’t added a CSS preprocessor to video.js before because we didn’t want the extra layer of abstraction, or the extra step in the build process. When looking at the CSS in the new designer however, it became clear how valuable things like variables can be for helping people understand what’s happening in the CSS. Still, we’re trying to find the balance between using LESS features and keeping the CSS easily readable by anyone who just knows CSS. That means avoiding some of the more advanced LESS features like conditional statements (though we do use one for big play button positioning).

We chose to use LESS because of the ability to parse the LESS markup in javascript in the browser. I’m not aware of any up-to-date in-browser SASS parsers. The completeness of LESS2CSS also influenced that decision. We’re using a small enough subset of features that it doesn’t really matter which one we use otherwise, though I do like the idea of using \$ for variables over @.

It’s hosted on Nodejitsu, and we’re taking advantage of their free hosting for open source. I have to say, it was pretty simple to get the app deployed with their command line tool.

Let us know if you have any thoughts. The code for the designer can be found here: https://github.com/videojs/designer

Cheers,
-heff