Audio and video shortcodes not working properly

by

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:

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

Leave a Comment