Generally speaking, if you lot ask ten WordPress developers how to do something, yous'll receive ten different answers. But that speaks to both the versatility of the CMS and that there is more than one solution to any given chore.

Recently, I faced the challenge of setting up an HTML5 video inside a WordPress page. It's in a static location and would demand to be replaced every so frequently. While information technology'south fine to use the Video Shortcode, in this instance I wanted to make things extra elementary for the folks who would be updating the page. I didn't want them to have to larn what a Shortcode was or how to use it.

So, the simplest solution (in my mind, anyway) was to create some custom fields where the related video files could be uploaded. From there, the theme'southward template would automatically create the necessary lawmaking to display the video. Here's how I did information technology:

Projection Requirements

Yous'll of course need a WordPress site and access to edit your theme (please use a child theme if you lot aren't already doing and so). Some familiarity with PHP and HTML volition also exist a big help. Beyond that, you should accept:

  • A style to create custom fields. The complimentary version of Advanced Custom Fields (ACF) volition do the task quite well. Install and activate information technology on your WordPress website.
  • A video – ideally in multiple formats. Although MP4 files are at present supported across every major browser, it might not be a bad idea to provide a WEBM version for actress coverage. And, while y'all're at it, a FLV fallback for those using really ancient browsers couldn't hurt. You'll want to make sure that each version of your video is set to the same resolution.
  • A 'affiche' image. Either a screen capture or custom graphic made to the highest resolution your video will be played at.

Create the Custom Fields

Step 1: Create the Custom Fields

One time yous've installed and activated the gratuitous version of ACF, become to the Custom Fields menu inside WordPress and and then click Add together New.

Inside your new set of fields (ours are called 'Video Fields'), you'll need to create an ACF File field for each video format you plan to upload, plus another for the poster image. In our setup, we accept fields for MP4, WEBM, FLV and a Poster. For each file field, brand certain to select the radio button in Return Value that says "File URL". Too, be sure to make note of the Field Names – nosotros'll need those later on.

The group of custom fields.

Next, inside the ACF 'Location' setting, assign your new fields to whatever page or post you'd like and salve your work. When you get to edit that assigned page, you should come across the fields (you may have to scroll downwardly a bit to observe them).

Custom fields to upload video files.

Step 2: Upload Video Files

Navigate over to edit the page or post where you assigned your new custom fields. From there, it'south a matter of uploading the correct files. In one case you've uploaded the requisite files, save your folio/post.

The video, after being added to the template.

Step 3: Edit the Template

Now comes the fun part – adding some PHP magic to your theme's template. If you're not familiar with the WordPress template hierarchy, now may be a good time to study up on it.

Detect the correct template file and location where y'all'd like to place the video. And so, copy and paste the following code snippet and customize to lucifer your needs:

<?php // Get the Video Fields $video_mp4 =  get_field('mp4_video'); // MP4 Field Name $video_webm  = get_field('webm_video'); // WEBM Field Name $video_flv =  get_field('flv_video'); // FLV Field Proper name $video_poster  = get_field('poster_image'); // Poster Epitome Field Name          
          // Build the  Shortcode $attr =  array( 'mp4'      => $video_mp4, 'webm'     => $video_webm, 'flv'      => $video_flv, 'poster'   => $video_poster, 'preload'  => 'car' );  // Brandish the Shortcode echo wp_video_shortcode(  $attr ); ?>

The beginning section of code references the names of the custom fields we created in Pace 1. We're creating a PHP variable for each field (they will output the URL of their respective file), which we'll need to use in the middle section of code.

Down in that center section, we have an assortment of attributes for the wp_video_shortcode function. Notice that there is an attribute for each file blazon. We're also choosing to preload the video, but that's completely optional. Here you tin likewise ready width, elevation, loop and even (gasp) auto-play the video if you lot similar.

The bottom section of code is outputting the result of our work into our template.

In one case y'all take everything set up satisfactorily, you will want to save your template and upload it to your website (or just salvage if y'all're using the built in WordPress theme editor). And then, check your folio on the front cease to make sure the video is properly displayed.

WordPress has a HTML5 video role player built right into the CMS and the default player looks and functions quite well. Simply you tin can style various options if you want to give it a more personal touch. Inspect the output lawmaking with your browser's developer tools and make annotation of the various CSS classes. For example, the container element has a class of .wp-video. Y'all may also want to take a look at a tutorial for a more in-depth expect at possibilities.

Custom Fields Simplify the Process

Custom Fields Simplify the Process

Using custom fields can bring a wealth of new functionality and design possibilities to WordPress. But a core element of their awesomeness is that they can brand managing content easier. Regardless of who will be calculation and editing content, custom fields tin can streamline the entire process. That benefits usa all, but it's specially prissy for users who aren't adept developers.

Adding some simple functionality similar the HTML5 video fields to a higher place can greatly reduce the learning curve a new user faces. Instead of having to think near what they're supposed to do, it's at present get a matter of uploading a few files.

In the end, that little scrap of extra piece of work upward front end can save everyone some time and headaches for the life of the website.