WordPress, code, design, business

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.

What You’ll Get

Here’s an excerpt from John Piper’s The Legacy of Antioch sermon.

And now a video of windmills…

How To Do It

The process is similar to inserting an image into your post content.

1. Add or edit a page or post.

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

Add Media

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”.

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.

http://sample-content.churchthemes.com/resurrect/uploads/2013/06/sample.mp3

That will automatically produce this, playing off of a different server.

Using Shortcodes

You may have noticed if you view your content in Text mode that the media player is generated by an [audio] or [video] 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.

The Legacy of Antioch video and audio by John Piper. © 2012 Desiring God Foundation. Website: desiringGod.org. Used by Permission.

Tweet about this on TwitterShare on Google+Share on Facebook

48 Comments

  1. Nice post, Steven. I was just looking for documentation on this yesterday, when I also discovered it wasn’t there yet. You should cross post some of this to the codex :)

  2. From my experience, when using a video hosted on Amazon AWS, you must substitute http for the https that you get from the properties link. Other than that, it works like a dream.

  3. HI Steven..

    Thanks for your post :-)

    I tried to add a video as you described, and it works fine… But where, in your video example, there is a nice pic of the windmills, there is only a black box in mine…

    Did you do anything special to get a still pic on the front, before someone clicks the video to play…?

    Kind regards
    Uffe

    • Steven Gliebe (Author)

      Hi Uffe,

      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.

      You might want to investigate the MediaElement.js site: http://mediaelementjs.com or WordPress Support Forums: http://wordpress.org/support/. Let me know if you find out what the reason is as others who read this might want to know.

      • Hi Steven..,

        I have finally (I think) found the reason. It was the video file…

        Although it was the same format as yours, what it was missing was a “color-code” -whatever that is.

        But long story short, I tried it with another videofile, and it worked just fine… ;-)

        Kind regards
        Uffe

  4. 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.

  5. 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?

  6. Hi,

    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..

    • Steven Gliebe (Author)

      I’m not very informed on search engines and videos. You might want to look for some clues on the WordPress support forums and/or the MediaElement.js website.

  7. Hi Steve

    Noticed your self explanatory re the embed facility in wordpress 3.6 have already upped to 3.6.1

    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.

    Any help obviously appreciated (asap) my location is London UK…

    Regards… Mac

    • Steven Gliebe (Author)

      Some things to check are to make sure the URL is on its own line and not linked (remove ). You could also view HTML source of the post to see if WordPress output any HTML in place of the link.

      You’ll probably get a wider range of help by posting your question in the WordPress Support Forums: http://wordpress.org/support/

  8. Thanks Steve

    Have tried your options but no go as of yet. I will bounce over to the Support Forum as you kindly suggested. Mark this query as “closed”…

    Mac

  9. 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!

    Cheers

  10. 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.

    • Steven Gliebe (Author)

      Hi Joel,

      Are you using the latest version of WordPress (3.6.1)? A lot of this was added in version 3.6. You could try deactivating all plugins too in case there is something conflicting.

  11. 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.

    • Steven Gliebe (Author)

      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.

      This is another good question for the WordPress Support Forum where there other people that may have some insight: http://wordpress.org/support/

  12. Hi – though on v3.6.1 it doesn’t give me the embed option in media, would you know why that might be? thanks Steve

    • Steven Gliebe (Author)

      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/

  13. New to WordPress and videos – but is it possible to embed more than one video on a single page? Haven’t been able to do it – but haven’t updated to 3.6 either yet. Would that make a difference?

  14. I am having a lot of trouble uploading my videos to WordPress. When I go to “Add Media” to choose a file, it says the only files it accepts are:

    “Allowed file types: jpg, jpeg, png, gif, pdf, doc, ppt, odt, pptx, docx, pps, ppsx, xls, xlsx, key.”

    How can I upload an MP3 audio or MP4 video, or a .mov?

  15. Hi Steve,

    I found your post very useful. However I have a problem with videos embedded from my blog.

    It happens that if I zoom in or out the web page on any browser, the video box is zoomed, but the video inside is zoomed more, so that the video is not correctly resized in the zoomed box.

    Do you know why
    Thank you in advance for your support.
    Vito

  16. 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

    Thanks in advance.

  17. 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.

  18. 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?

    Thank you!

Commenting has been turned off.