How to embed audio and video players in WordPress

WordPress 3.6 has been released and one of it’s best new features is the ability to embed audio and video players for uploaded media directly into post or page content. The excellent MediaElement.js JavaScript library is used to output an HTML5 or Flash player, depending on the browser and device, for near-total compatibility. This is a very well-regarded script and is now included in WordPress core for native functionality and for theme/plugin authors to leverage.

In preparing guides for the imminent churchthemes.com launch, I was surprised not to find multiple tutorials explaining to regular users how they can use this new feature. Just this morning I was asked by a customer if it was possible to show a player for an uploaded MP3 file. The answer a few weeks ago would have been to use a plugin. The answer today is yes, WordPress can do that. Here’s how.

Upload and Embed

First let’s take a look at what the audio and video player look like. Not screenshots, but the real thing! I’ve uploaded these files and embedded the players using the steps below.

How To Do It

2. Click in your content where you want the player to appear then hit Add Media above the content editor.

3. Click Upload Files.

4. Upload an audio or video file.

5. Make sure the file you uploaded is selected then under Attachment Display Settings set Embed or Link to “Embed Media Player”.

6. Click Insert into page.

WordPress will have inserted a shortcode for your audio or video that will be replaced with the player.

File Types

MP3 for audio and MP4 for video are pretty standard but the MediaElement.js player supports all of these file types.

webm

ogv

mp4/m4v

wmv

mov/qt

flv

mp3/m4a/m4b

ogg/oga

wma

wav

Video Considerations

Keep in mind that video files are often very large in size. It is usually recommended that you host video on a service like YouTube or Vimeo since their servers are optimized for streaming video. It will also save you the cost of disk space and bandwidth. See Embedding from Other Sites below.

Using a URL

Maybe you uploaded an audio or video file to another server, say Amazon S3 or a file hosting service. In that case, you can’t use the process above. Instead, simply provide the URL to the file in your content. WordPress will read its extension (.mp3, for example) then automatically show the media player. Just enter the URL to your media file (unlinked) on a line of its own.

shortcode. You can use a shortcode directly with a set of attributes for even more control over how MediaElement.js renders the player. Read Scott Taylor’s Audio / Video Support in Core post on the WordPress Core blog for shortcode examples.

Embedding from Other Sites

Consider this a bonus. You might also want to embed a video from a site like YouTube. This has been possible before WordPress 3.6 with a very handy feature called Embeds. It’s not new, but I find many users are completely unaware of it and struggle at copying/pasting blocks of HTML embed code, which often requires the help of a plugin. That’s too much work! Instead, just paste the URL of the page showing the video.

For example, there is a YouTube video at http://www.youtube.com/watch?v=mmRPSoDrrFU that you want to embed. Simply paste that into your content on a line of its own and the YouTube player will show in its place when you publish. Be sure that the URL is not linked.

http://www.youtube.com/watch?v=mmRPSoDrrFU

That simple line above becomes this:

Here’s one from SoundCloud to demonstrate the wide range of sites supported.

https://soundcloud.com/hillsongmusic/cornerstone-1

At the time of writing, WordPress includes support for about 20 sites. Here’s the list of supported sites. New versions of WordPress increase support, with Rdio and Spotify recently being added in 3.6.

Conclusion

So that’s all pretty cool. WordPress now has a huge range of support for local and externally hosted audio and video. Our themes at churchthemes.com are all responsive (mobile-friendly) so I’ve developed some code to make most of the WordPress embeds responsive as well (resize your browser to see it in action on this post). I hope to share that with theme developers in a future post.

Related:Embedding Media at churchthemes.com has a video I produced walking you through things.

I’m sure it would be possible with CSS. You could view the elements of a page using the player with Firebug or similar to identify the class names for various parts of the player, then try to hide them with CSS. This is the approach I would take first but haven’t actually done it myself.

I’m glad you’ve found Zipfolio to be useful. Please give it a rating on ThemeForest if you haven’t yet.

Nothing special was done to make it show that frame automatically. I know what you mean though as I’ve seen a player be gray before hitting play as well. It probably has something to do with the actual video file.

Thanks for this article! There are so many dead-ends about which media plugin to use. Many of them require commercial licenses, accounts, or they just look ugly. This feature and your explanation saved me the headache of using a sub-par plugin.

Great post…..I have this working fine on our site but would love to adjust the size of the player. I have looked everywhere for how to adjust the size. Am i just missing it? Does anyone know how to do it?

Great article. Do you know if Google would be able to crawl these new self-hosted videos and have them show up as thumbnails in the SERPs? I have been able to get Wistia videos hosted on WordPress to show up in the SERPS, I hope these can too..

Followed your instructions exactly to the comma with regards to embedding a player/video but, as soon as i hit “insert into post” nothing appears at all whether in visual mode or in txt mode for that page… Have tried numerous times just in-case I was having a bout of “auldtimers” but to no avail.

Every thing else works fine. Am just test-linking a pop up player on the site for now (see link above). But would like to use an “embed”. All movies are uploaded on another site of mine and I link to that.

Re Movies; Flash (flv) for my website “http://www.foxnwolf.com” and now placing mp4 on “http://www.foxnwolf.com/locknload/” so more devices can be used to access them.

Thanks so much for the detailed info., it really helped me out today when my old player disappeared (and a few others I tried we’re too far outdated to even show up) from product pages with the WP 3.6.1 update – without this player and your help I wouldn’t be getting any sales!

Yeah, none of this worked on my WP. Nothing automatically gets formatted by WP. My one option is to paste the link over a word or description that indicates the link goes to a video. Very frustrated…not with your guidance, but with WP.

You’re a genius my friend, without doubt but I have one question, can I run the embedded WordPress player with a .m3u playlist extension from my server? I tried and failed but maybe I missed some little tweak.
Thanks, Ron.

That’s a good question. I’m not sure, but if it doesn’t work then assume WordPress won’t accept that format. MediaElement.js does support .m3u though so WordPress could. For now you may need to do something custom to make it work. I’m just guessing though.

Nothing shows for embed under “Attachment Display Settings” after uploading and selecting a valid media file? Make sure it’s an embeddable format (MP3, MP4, etc.). Also double check to make sure WP 3.6.1 is running. It should be there. If not, you may want to take this to the WordPress support forum: http://wordpress.org/support/

Could you please give me an example of the shortcode needed to embed a video from vimeo and make the player the same size as at vimeo, 960×540. Right now when i embed video it appears much smaller in wordpress than at vimeo

Thank you for this helpful post. One of the reasons I love using WordPress is that I can find help and encouragement from others on the web. When problems arise, a quick search leads me to some clever person who already knows how to do the task I am struggling to figure out. Greatly appreciate your clear, uncomplicated instructions!

Hi Megan. Thank you for your kind words. I agree, that’s one great thing about WordPress. I think since WordPress is very much about writing, writing about WordPress comes naturally. I almost always find a solution to questions I have about WordPress by doing a quick search.

Hi! I’m not able to get my videos to run; they just sit there, saying they have 00:00 for time, and never play. Sometimes I get a MIME type error, but I have the proper file types listed in my .htaccess file…. What should I do?