One of the big changes that came with WordPress 3.6 was the introduction of an embedded media player.

I have had occasion to embedd audio files in the past and I used a plugin for the purpose.  However, if I can avoid plugins then all the better, so I ran some tests with the new version.

The first trial showed the player all right, but there were no buttons.

I tried clicking on the left-hand end of the graphic and the player worked.  However I wanted a “Play” button.

I searched the Internet and once again discovered that I wasn’t the only one with this problem  Apparently the breakdown is because of the use of the SVG mime-type, and not all sites support this.

The main solution given was to add the mime-type to the site’s .htaccess file –

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

This solves the problem, but not every site owner has access to the .htaccess file, and some may just be nervous about meddling in that area.  I devised an alternative method.

The button graphic in question is stored in two formats – .SVG and .PNG so a simple tweak to the CSS file changing the file from .SVG to PNG will also work.  However, finding the references is not easy, and anyway any modification will be overwritten by any upgrade to WordPress.  The solution is to add the following to your theme’s “style.css” file –

.mejs-overlay-button {
    background:url("/wp-includes/js/mediaelement/bigplay.png") no-repeat !important;
}
.mejs-controls .mejs-button button {
    background:transparent url("/wp-includes/js/mediaelement/controls.png") no-repeat !important;
}

The “!important” directive will ensure that the code takes precedent over any WordPress CSS.

Either method will have the required result –