Add a Shortcode for HTML5 Video to WordPress
A tutorial with example PHP code adding a shortcode to a WordPress based web site allowing video to be inserted into post using the HTML5 video tag, no extra Javascript library required. The 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, Firefox, Safari and Opera) support the video tag. Once the code is added to the site’s WordPress theme it can be used like this:
|
1 |
[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 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 Embeds support for some video hosting sites.
Changing the Theme’s Functions.php File
WordPress uses themes to style a web site. Part of the theme is a code file called functions.php. In this file code is called by the theme at various points as the user navigates the web site. Additional code is added to the file to extend a themes functionality. Here a function is defined to add the shortcode to allow for HTML5 video embedding in a post. You will need to edit the theme’s function.php file to add the new code. This can be done via the Editor under Appearance when administrating the site. Important: Before changing any web site files make a back up!. Continue reading