Home » Technobabble » video player buttons disappearing in wordpress in all browsers

video player buttons disappearing in wordpress in all browsers

This one falls into the “reminding myself how to do the workaround” category, but maybe it will be helpful to someone else, too.

The WordPress media player has some nice buttons for play, volume, full-screen, and so on. But no matter what I did, I could not see those buttons in any browser. They were there, and could be clicked, but were completely invisible.

The problem is that those buttons are produced as .svg files (scalable vector graphics) and some servers have trouble associating mime-types with those. So the server won’t serve them up (or it serves them as plain text, or something, which they’re not, so they’re not visible), no matter what browser you use.

There are various htaccess tricks to register the mime-type, but I couldn’t get them to work.

However, those same buttons also exist right in the same directory as .png files, which the server is fine with, so I just went to /wp-includes/js/mediaelementplayer.min.css

(UPDATE: It’s now  /wp-includes/js/mediaelement/mediaelementplayer.min.css )

and replaced every reference to “svg” with “png.” That did it (had to clear my cache in safari to see them there).

It’s ugly to edit core css like this, and will break every time I upgrade, most likely, so I’ll have to do it again, so that’s why I’m noting it here!


7 Comments

  1. you can use, html5 video tag, it is better than wp plugin.

    this tag has many att for set any option, such as cover photo and …

  2. u can use WYSIWYG Web Builder 10 this program have to many options for make player with flash , html5 , etc

  3. Adding this to .htaccess appears to work for some people:


    AddType image/svg+xml svg
    AddType image/svg+xml svgz
    AddEncoding x-gzip .svgz

    If that works for you then the issue is a ‘simple’ mime config error. No one added the SVG type to your server. Should be fixable at the server level too, but .htaccess is good in a pinch.

Leave a comment

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