Modifying a Projekktor Theme

by Martin Westin in ,


Projekktor is a most excellent open-source video player for the web. It requires javascript but that is totally worth it. You get cross-browser compatibility, flash fallback, consistent GUI across browsers and much more. What i will explain in this short article is how to modify the GUI part. The first thing I wanted to know was: What does the html look like? Since it is generated by javascript it is not readily apparent so here is the html structure of the video "controls".

Wrath - YOUTUBE Flash API 2/4
00:18 / 03:46

The enclosing div (classed ppcontrols) is itself enclosed inside a set of tags that are positioned and make fixed-size box (the size of the video element). This makes things nice and workable. You can position and set the size for ppcontrols and then place each element in relation to this div.

I will continue to call each control element by it's class name since these are what you target in your css. Just to make things really obvious, here is a screenshot with the class-names added.

Projekktor Controls

If you want a different look but like the general dimensions you can just start replacing the graphics in the theme folder of projekktor.

To my eyes the standard theme looks very nice. I wanted to keep the same look but make it resize to fit various video sizes. To achieve this I needed to make the size of the main ppcontrols div relative to the video frame. Instead of a fixed width I ended up with this css.

.ppcontrols {  
    position: relative;
    left: 20px;
    margin-right: 40px;
    display: block;
    width: auto;
    height: 87px;
    margin-top: -110px;
    border: solid 2px #fff;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    background: transparent url(projekktor/ctrl-bg.png) 0 0 repeat-x;
    z-index:8000;
    padding: 0px;
}

This creates a control area that always stretches to 20px from the left and right edges. As you can see I also added a css border (with radius) and a new background to get close to the original graphics of the theme while still being flexible horizontally.

The I proceeded to position the elements relative to one of the edges or the middle of the controls area. For example:

.ppfsenter {
...
    top: 50px;
    right:10px;
...
}
.ppplay {
...
    left: 50%;
    margin-left: -17px;
...
}
.ppscrubber {
...
    left: 13px;
    right: 13px;
...
}

With these minor changes to the css the full-screen buttons stick to the right edge and the play/pause buttons stick to the center. Items like the scrubber and the title are positioned in a similar way to the main ppcontrols div. I chose a different css to get the results this time ... just for the variation. Use whichever one you prefer.

The results of my modifications are available for download if you want to take a look at all of it or give it a test-drive.

"demo" (just the v0.6.1 release unpacked and edited) http://dev.eimermusic.com/projekktor/readme.html

the css and images in a zip-file http://dev.eimermusic.com/projekktor/projekktor_theme_fluid.zip
http://dev.eimermusic.com/projekktor/projekktor_theme_fluid.tar.gz