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:
MediaElement.js is a polyfill for the HTML5
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
<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”
Thank you !
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?
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.
Thank you 🙂
thank you! Very usefull!!!!!!!
Thanks a lot for sharing 😀
Hi, I am not sure why but the plugin skins only the Video Player, the audio player still has the default skin :/
As you can see it’s working in the demo for the audio player as well. Do you have an example so we can take a look?
Yeah same here, once i updated MediaElement.js, it doesnt want to show the custom design just the default.
Hi, I have the same problem on a fresh WP 3.5.1 install. The skin does not apply to the audio player…
Thanks for fixing 🙂
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!
Thank you for posting. I had to go digging for the right link for Clark’s audio player PSD file (http://www.premiumpixels.com/?s=audio+player).
Has the issue been resolved with regards to only customizing video and not audio (mp3) skins?
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!
We are aware of this change. We will adapt the plugin to the new changes once 3.6 is released. Thank you for your contribution!
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' );
How do I apply the new skin to a MediaElement.js audio player? Thanks!