I'm having some trouble with Wordpress's built-in shortcodes for audio and video.

When I embed a video, it basically gives me a black box and has a link to download the file at the top; when I embed audio, it adds it, but there is no play button. I can still click where the play button is and it will play, but no actual button.

I tried using different plugins, mediaelement.js and widgetkit (by yoothemes) among others, but everything is giving me the same type of output.

What am I doing wrong? I would really really appreciate any help I can get.

Additional Info:

  • using Thesis Theme 2.1
  • have tried disabling all plugins to see if anything was conflicting; made no difference
  • have tried removing all jquery scripts from the head; also made no difference
  • all css and js files appear to be linked properly (all styles and jquery animation are in place)
  • here's a test page of my site so you can see what's displaying: http://kitabummuneer.com/newsite/index.php/test-page/

1 Answer 1


Okay, there are two things going on.

First, since you are running WordPress 3.6, you don't need to run any other media player plugins. Deactivate Widgetkit and use the following shortcode to add your audio player:

[audio src="http://example.com/mysong.mp3"]

The reason you aren't seeing the play button on your players is that your web server is not serving out SVG images correctly. The MediaElement.js player uses a single SVG image named controls.svg for all the buttons on the player. Your web server is not serving the SVG image correctly. Here is where your SVG image is located on your website: controls.svg.

Click on that link, and compare to this link: controls.svg on wp.com

It could be that you don't have the correct MIME type installed for SVG files. It should be: image/svg+xml

  • Thanks so much for replying. I did deactivate widgetkit and try just the wordpress shortcode, but that displayed something funkier than what I had with widgetkit. I checked the controls.svg file in my ftp and compared it with your link; they were identical. How do I go about installing the correct MIME type?
    – sahiba25
    Commented Sep 6, 2013 at 16:06
  • Also, the site is hosted on a Windows-based server. Do you think that makes a difference in any way? Like maybe I have codecs or something missing?
    – sahiba25
    Commented Sep 6, 2013 at 16:22
  • I added this text to my .htaccess file (which is located in the root folder of my WP install): AddType image/svg+xml svg. It made no difference. :(
    – sahiba25
    Commented Sep 6, 2013 at 16:28
  • Perhaps the MIME type isn't the problem, but your site is definitely not serving it out correctly. I don't know how to fix it, though. Perhaps a question on ServerFault or Pro Webmasters will get you an answer to that question.
    – Ben Miller
    Commented Sep 6, 2013 at 17:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.