Custom MediaElement.js Skin

We needed a HTML5 audio and video polyfill and the best and most feature-rich we could find was MediaElement.js. We also wanted a player skin that was beautiful and usable and fell in love with Orman Clark’s audio player design. We coded the design and the result was a custom skin for MediaElement.js which we now share with you. You can download the skin below or see a demo of it in action:

Download View Demo

MediaElement.js is a polyfill for the HTML5 <audio> and <video> tags. It features a JavaScript API and a media player fully skinnable using CSS. It supports a variety of cutting-edge features that are specified in the new HTML5 implementation including resizable layout, full-screen playback, closed captions, subtitles and chapters and has fallback players for Flash and Siverlight for older browsers. The player is fully skinnable using CSS; the Flash and Silverlight fallbacks are just simple players with no controls and the playback is controlled with JavaScript using the so called MediaElement API so there is no need to hack into source files to make skins work in older browsers.

It is in our opinion the best HTML5 audio and video polyfill because not only because it is complete and feature-rich but because it decorates the actual <audio> and <video> tags instead of requiring its own custom HTML code like other ployfills do, so you can keep your code clean and semantic.

We hope you like and enjoy this skin and feel free to use it for both your personal and commercial projects with no attribution required.

UPDATE: This skin has been made into a WordPress Plugin, you can download it for free here. You need to install the Offical MediaElement.js Plugin first for the skin to work.

17 thoughts on “Custom MediaElement.js Skin

  1. Very cool! Thanks for an awesome plugin.

    Is there no way to easily integrate the cool shadow the player has in your demo? why tease with it?

    1. That’s just a background image applied to the player’s container. You can find it in Orman’s original PSD file or you can take it from the demo if you like. It’s not at all difficult to add but it’s not been added to the final skin because it would certainly not be a general user preference.

  2. The full screen button is forced on to a new line on the Google Nexus 7 tablet. Doesn’t look very good. Aside from that, very nice design! Love it!

  3. Note to your readers: as of WP 3.6, MediaElement.js is now part of WordPress core, so it’s not delivered via a plugin any more.

    Accordingly I rewrote your PHP file as follows (follow the link), which is the minimum required to overwrite the default CSS/images with your lovely design!

    As I said, it’s the minimum required, without options page or anything else, but it works!


    1. I got the pastebin code to work by deregistering the media elements styles set up in the core [sweat] ..

      Add this before the wp_enqueue_style:

      wp_deregister_style( 'mediaelement' );
      wp_deregister_style( 'wp-mediaelement' );


Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">