WordPress’ Native Video Player

Updated October 2020

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), we had never used it. We always recommend using Wistia, or at the very least Youtube or Vimeo.

We started our attempt at learning how to use the native video embed by doing the thing everyone should do when trying to figure out a problem in WordPress: Searching Google, naturally.

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

NOTHING!

So we decided to put together two tutorials here, one for using the new Video Embed Block (for those using WordPress 5.0) and one using the Classic Editor for those using older versions.

WordPress 5.0 (Guttenberg)

With Guttenberg, WordPress has greatly simplified the way you upload and manage your video embeds. It’s as simple as clicking on the “Add a Block” button (the small + symbol in a black box on your admin edit page).

From there, simply select the “Video” block from under the “Media” heading. This will add the “Video” block to your page.

From there, you can embed either via upload, from a URL, or from a video that has already been added to your media library.

That’s it! It’s really that simple.

WordPress Classic Editor

All Google mentioned during our research, were the oEmbed video links, which isn’t what we were 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. We started to wonder if it was even around anymore, or if it had been abandoned.

We were 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 we entered did not lead us 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.

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

FTP it is!

Once the video was FTP’d, we 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 we 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 either the “Add Media” button 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.

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: