WordPress' Native Video Player | Video Media Embed
WordPress' Native Video Player - Video Media Embed

We recently had a request from a client to use WordPress’ native video player (media embed). To be honest, even though it’s been around since WP 3.6 (August 1, 2013), I had never used it. We always recommend using Wistia, or at the very least Youtube or Vimeo.

I started my search of learning how to use the native video embed by searching google, naturally.

The first link I clicked on was to the WP Codex on Embeds, which I figured would have all the information I needed.

NOTHING!

All it mentions is oEmbed video links, which isn’t what I was looking for.

Back to google. The search results were FLOODED with answers about video plugins for WordPress, but very few people were talking about the native player. I started to wonder if it was even around anymore, or if it had been abandoned.

I was eventually led to the Video Shortcode WP Codex page. If you search for just “WordPress Video” you’ll find the link to this page, but most of the other search terms I entered did not lead me there.

Reading over the Codex for the video shortcode shows you what the shortcode looks like, and the different parameters that can be added to it, which was useful.

My next step was to upload the video to the media library. The video I was going to be using was a 93mb .mkv file. I clicked on “Add New”, chose my file, clicked upload, only to see an error message that the file was too large.

FTP it is!

Wordpress Media Embed

Once the video was FTP’d, I wanted it to show up in the media library. Images, videos, and other files will not show up in your Media library simply because you have FTP’d them into your Uploads file. A plugin I like to use to add FTP’d media to the Media Library is called “Add From Server“. This has come in handy in the past, many times.

As long as your video file is a supported type (mp4, m4v, webm, ogv, wmv, flv), you’ll be able to use the  within a post editor. Using this will add the shortcode right into the content. However, it doesn’t give you any of the parameter options that are available within the shortcode. You’ll have to refer to the codex for a full list of these.

The shortcode has the ability to list fallback versions of the video, incase the device someone is using cannot use the default type (which is the first source you list). You must have each of these video file types on your server, though they don’t all need to be added to the media library for the shortcode to display them.

If you like “autoplay”, that is an option. You can also set it to preload the video when the page loads, that way it’s ready to play if and when someone clicks on your video.

Example WordPress Native Video Shortcode

The one that wasn’t very clear to me at first was the poster=”” option. This allows you to set the image that shows before a user clicks play.

The video player is fully responsive, so you do not need to set a width and height, as it will respond to the container it is in, though width and height are options within the shortcode.

Here is an example of one of the video’s we’ve created, using WordPress’ native video player:

6 Comments on “WordPress’ Native Video Player

  1. gary

    I was searching the web for insight into a problem I am having with video playback on my very new WordPress website. When I got to the end of your article, I played the video you feature there, and sure enough the video stalled out here on your site just as it does on mine (for some users). I have a slow internet connection at my home, but a fast one at work. But the videos on my site stall out (as the buffering refuses to keep up) no matter where I’m at. Some, but not all, of my audience experiences the same thing on their computers. One last data bit — the videos seem to playback fine on my Apple mobile devices most of the time. Also, video plays back fine on both my computers (home and work) on Youtube, Vimeo and the like. Any clue what’s going on? I use Macs and Safari.

    Reply
  2. Ben Heath

    I’m not aware of any issue with the buffer sticking like that. It very well could be tied to the internet speed. What is your download speed?

    Are you able to test your site via other internet connections?

    You can post a link to a page on your site where a video is, and I can take a look to see if I have the same issue you’re seeing.

    Reply
  3. Tim

    For some reason on my wordpress site the full screen button doesn’t appear in the video. I am just using the native video player on wordpress 3.8.1

    Any thoughts?

    Reply
    1. Ben Heath

      Hey Tim,

      Send me a link to a page on your site where you’re seeing this, and I could take a look on the front end to see if it’s just a CSS issue.

      Could you also tell me if the button is missing in all browsers… or just a specific browser.

      I searched around google, and checked the WordPress core tickets, and didn’t find anyone else talking about the full screen button not being visible.

      You may want to also submit a ticket to them, once you can narrow down the exact environment that the problem is happening in.

      https://make.wordpress.org/core/reports/

      Reply
  4. kosinus

    my wordpress integrated native player ‘s full screen button does not work.

    when i click the button … the video stops.

    how can i make the button into full screen working?

    Reply
    1. Ben Heath

      Could you send me a link to where a video on your site is? I’m not aware of there being an issue with the fullscreen button. Also, let me know what browser you’re using and its version, as that may play a role in it not working too.

      Reply

Leave a Reply

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