bizeps.or.at goose hacks

The German version of Yahoo Media Player aka goose is live in a news story titled Molterer: ORF ist keine private Einrichtung, er kassiert Gebühren.

There’s a striking degree of customization, which was done by a guy named Eric Eggert.

You can read their Javascript at http://www.bizeps.or.at/ymp-german.js. This is all concerned with translating the player into their users’ language, which of course is a necessity for a big league commercial site like this.

You can read their CSS at http://www.bizeps.or.at/artikelnew.css. Search for #ymp to find the customizations.

The most interesting CSS issue is that they override the sprite master for the graphics, but *only* for the buttons. The master sprite includes a bunch of other graphics that they apparently didn’t want to disturb.

Here’s the standard master sprite:


Yahoo Media Player sprite master

Here’s their button-only sprite:


bizeps.or.at sprite master for Yahoo Media Player

Here’s* the part of their CSS which inserts the button sprite:

(*At least, I think so. This is from quickly eyeballing the CSS.)

They also changed the default album art, which they did by putting an img element in each of their audio links. For example:

<a href="/multimedia/molterer081121orf.mp3">
<img border="0" align="right" alt="Bild von Kopfhörer" src="http://www.bizeps.or.at/hpbilder/audio.GIF"/>
Zitat anhören (1.744 KB / mp3)
</a>

The broad lesson is about how making widgets with Javascript rather than Flash is good for your project.

Big league commercial shops like this web site must be able to customize their widgets. It’s not the same kind of personalization that drives Myspace users to change their background image, but it’s make-or-break. And big league sites like this are the ones who get your widget into big numbers.

These guys were able to do this degree of customization specifically because the player is made of open standards. By definition, open standards are APIs and hooks for user code.

So using open standards for your widget or tool is to your own advantage. Don’t invent an API, adopt internet standards and let them be your API.

4 thoughts on “bizeps.or.at goose hacks

  1. Hi Lucas,

    thanks for writing so much about my customizations. Bizeps is a center for independent living of disabled people here in Vienna. Online they have one of the most important news services in German language.

    The translation aside we wanted to create a distinct and simple look, matching the over all website by leaving everything out which wasn’t necessary. I didn’t mess with everything but the buttons because they fitted very well.

    For the sprites: I developed using individual images and used the sprite generator at http://spritegen.website-performance.org/ to get the sprite.

    Over all it was very easy to do those changes with CSS, it really helped to have a more visual CSS editor, I used CSSEdit by MacRabbit (http://macrabbit.com/cssedit/).

  2. Excellent hack!
    There seems to be small bug with the IE browsers.
    Bottom shadow is wider than the main player…
    Any ideas how to fix that?

  3. Talking to my self:

    Adding this:

    .ymp-player-max #ymp-body #ymp-body-base { width: 500px!important; }

    will fix that…

  4. Thanks for posting the workaround, Tim. With luck somebody else with the same issue will find your comment via Google.

Leave a Reply

Your email address will not be published.