WordPress HTML5 Video Shortcode

Update: After the original publication of this article WordPress began supporting video as a media option. Therefore this article is provided for information purposes only. You may find the shortcode described here useful if you require finer control when posting videos.

Add a Shortcode for HTML5 Video to WordPress

A tutorial with example PHP code adding a shortcode to a WordPress based website. The new shortcode allows video to be inserted into a post using the HTML5 video tag, no extra Javascript library required. The created html5_video shortcode adds the HTML video tag to a post to playback video in HTML5 enabled browsers. The latest versions of the popular browsers (Internet Explorer, Chrome, Edge, Firefox, Safari and Opera) support the video tag. Once the code from this article is added to the site's WordPress theme it can be used like this:

[html5_video webm="url-to-video.webm" mp4="url-to-video.mp4"]

The html5_video shortcode parameters (options) are:

webm – The URL to the WebM version of the video, optional.
mp4 – The URL to the MPEG version of the video, optional.
ogg – The URL to the Ogg version of the video, optional.
resize – If set to yes the width and height values are applied, optional, defaults to no.
width – If resize is set to yes the width, in pixels, to display the video, optional, defaults to 200.
height – If resize is set yes the height, in pixels, to display the video, optional, defaults to 150.
poster – The URL for the poster image (the picture displayed before the user presses the play button) for the video, optional.
preload – The setting to use for the preload attribute, HTML5 values are none, auto, metadata, optional, defaults to metadata.

This html5_video shortcode is an alternative to the WordPress native video media support and Embeds support for some video hosting sites.

Changing the Theme's Functions.php File

WordPress uses themes to style a website. Part of the theme is a code file called functions.php. In the functions.php file code is called by the theme at various points as the user navigates the website. Additional code is added to the file to extend a themes functionality. In this article a function is defined to add the shortcode to allow for HTML5 video embedding in a post. You will need to edit the theme for your website, changing its function.php file by adding the new code. This can be done via the Editor under Appearance when administrating the site.

WordPress Editor Option

Important: Before changing or adding any code in website files make a back up!.

Make Back Ups of the WordPress Based Website

Editing theme files may cause the website to stop functioning if mistakes are made or incorrect code is added. Always have a way to restore the original files if changes cause the site to fail. Back-up files can quickly restore a website's functionality.

Most website hosting companies support taking regular back-ups of websites. They also allow site owners to perform additional back-ups of all or part of a website. Getting an offline backup of a website on a regular basis is recommended. This is normally done via a control panel that the web hosting company provides. Before editing the functions.php for the site log into the site's control panel and download or create a copy of the file (using the control panel's file management tools). The functions.php file is located under the wp-content/themes directory in a folder named after the theme being used. During the editing of functions.php if the site stops working replace the changed version with the copy to get the site working again.

Editing functions.php in WordPress

When logged into WordPress click the Editor option under Appearance then select Theme Functions from the Templates list to the right.

WordPress Edit functions.php

The hosting company's file editor can also be used to change the functions.php file. If functions.php does not exist use the hosting control panel and file management tools to create one. The article Quickly Create a WordPress Child Theme covers creating a functions.php file.

Add the HTML5 Video Shortcode Definition Function

In the WordPress Editor scroll to the bottom of the functions.php file. Add the following code as the last entry (but before a last line containing the >, greater than, symbol if one is present). Copy and paste this code to reduce the chance of an error being introduced by typing it into the file:

//[html5_video] Short code to add HTML5 video to a post
function gen_html_vid($atts, $content=null) {
    $vid_ret='<video controls';
    extract( shortcode_atts( array(
        'poster' => 'no',
        'preload' => 'metadata',
        'mp4' => 'no',
        'webm' => 'no',
        'ogg' => 'no',
        'resize' => 'no',
        'width' => '200',
        'height' => '150',
        'muted' => 'no'
    ), $atts ) );
    if($resize <> 'no') {
        $vid_ret .= ' width="' . $width . '"';
        $vid_ret .= ' height="' . $height . '"';
    }
    if($poster <> 'no')
        $vid_ret .= ' poster="' . $poster . '"';
    if($muted <> 'no')
        $vid_ret .= ' muted';
    $vid_ret .= ' preload="';
    $vid_ret .= $preload . '">';
    if($mp4 <> 'no')
        $vid_ret .= '<source src="' . $mp4 . '" type="video/mp4"/>';
    if($webm <> 'no')
        $vid_ret .= '<source src="' . $webm . '" type="video/webm"/>';
    if($ogg <> 'no')
        $vid_ret .= '<source src="' . $ogg . '" type="video/ogg"/>';
    $vid_ret .= "Video not supported.";
    $vid_ret .= '</video>';
    return $vid_ret;
}
add_shortcode('html5_video', 'gen_html_vid');

Click the Update File button to save the changes to the website theme.

What the Code Does

When the WordPress sees the html5_video shortcode it looks for the function that is to process the shortcode. This has been registered with the last line of the above code:

add_shortcode('html5_video', 'gen_html_vid');

The function processing the shortcode is called gen_html_vid. This reads the shortcode parameters and builds a section of HTML5 code based upon those options. The HTML code produced will look something like the following, which replaces the shortcode in the final page displayed to the user browsing the website:

<video controls preload="metadata">
    <source src="http://www.example.com/waterfall-video.mp4" type="video/mp4"/>
    <source src="http://www.example.com/waterfall-video.webm" type="video/webm"/>
    <source src="http://www.example.com/waterfall-video.ogv" type="video/ogg"/>
    Video not supported.
</video>

Test the HTML5 Video Shortcode

Test the changes by creating a post and adding the shortcode. Media uploaded in WordPress appears in sub-directories under the wp-content/uploads folder. Use the Media menu in WordPress to grab the URL of an uploaded file. (You may need to use the web hosting control panel to upload large videos to your website.) The previous HTML would have been generated from this shortcode:

[html5_video mp4="http://www.example.com/waterfall-video.mp4" webm="http://www.example.com/waterfall-video.webm" ogg="http://www.example.com/waterfall-video.ogv"]

Here is another example, this shortcode:

[html5_video resize="yes" width="216" height="120" muted="yes" poster="http://www.example.com/waterfall-image.png" mp4="http://www.example.com/waterfall-video.mp4" webm="http://www.example.com/waterfall-video.webm" ogg="http://www.example.com/waterfall-video.ogv"]

Will place this HTML into the final post's output:

<video width="216" height="120" controls muted poster="http://www.example.com/waterfall-image.png" preload="metadata">
    <source src="http://www.example.com/waterfall-video.mp4" type="video/mp4"/>
    <source src="http://www.example.com/waterfall-video.webm" type="video/webm"/>
    <source src="http://www.example.com/waterfall-video.ogv" type="video/ogg"/>
    Video not supported.
</video>

Tek Eye