5 Awesome Ways to Include Video on Your WordPress Site with HTML5

When it comes to working with videos for marketing goals, there are a fair number of video players to choose from. The key here is to select the video player that is the best fit for your organization’s needs. Among the most sought-after video players currently in the market is the HTML5 video player. In this post, we’re going to cover the top 5 HTML5 video players that you can use with your WordPress website.

Why Are HTML5 Video Players Important?

Integrating an HTML5 video player over the old Flash player has lots of benefits. Here are a few reasons why you should use an HTML5 video player-

● Reliable Mobile Device Support – Keeping your site in sync with the latest technology is fundamental to maintaining and increasing your customer base. As an increasing number of potential customers use mobile devices, HTML5 video player allows viewers to easily watch your videos from their mobile devices at any time and from anywhere.

● Full Browser Support – HTML5 video player is supported by all of the major browsers including the latest versions of Firefox, Chrome, Internet Explorer, Safari and Opera. A little modification of the code allows HTML5 videos to be viewed using older browsers as well.

● Easy to Add Applications & Links – With HTML5, it is straightforward to add links and applications to your videos. These are effective when it comes to improving user interaction, promoting related products or pushing additional information to viewers. It can also be integrated with Twitter and Skype and mass email systems like MailChimp and Constant Contact.

● Easy to Modify – HTML5 video is quick and straightforward to customize to help fit your organization’s specific needs. Changes to gradients, reflections and border are some of the fundamental changes that you can make. This is in addition to modifications to animations, transitions, opacity and adding your own unique transformation effects and watermark as well. Visual Watermark can help you in this regard.

● Simple to Manage – HTML5 video is straightforward to integrate into your site and once done, can be easily managed with the help of inbuilt video tags. Amongst other things, these tags allow you to loop videos, integrate features like autoplay, choose a specific video image or have the video preload while in the background.

Implementing HTML5 Video in WordPress

You have multiple ways of achieving this goal – which is integrating HTML5 video player into WordPress. Some of them will take just a few minutes whereas some other methods might take longer. Let’s have a look.

Using Plugins for Videos

WordPress, by default, allows users to embed videos without the need for additional plug-ins. However, for more features and flexibility, a WordPress video player plug-in is the way to go. There are different types of video plug-ins available today, but the user expects the video plugin to have the following features:

● Control size
● Set an initial image (of different sizes)
● Autoplay
● Captions
● Audio function
● Watermark feature
● YouTube
● Preload video
● Loop video
● Advertising

Most of the modern plugins have these features. We will have a deeper look at the plugins a little bit later.

Using Custom fields

Custom fields also referred to as post meta, is a feature in WordPress that lets you add additional fields to a post or a page. Here is a step by step method to create custom fields for video files. For this, a basic understanding for PHP and HTML would be helpful. Additionally, you will need the following;

1. A free version of Advanced Custom Fields

2. A video – preferably in more than one format

3. A poster image which can be either a screenshot or a custom graphic.

Step 1 – Create the Custom Field

1. Click ‘Add New’ within the ‘Custom Fields’ menu in WordPress

2. Create an ACF File Field for each of the video formats you want to upload plus an additional one for the poster image. Ensure that you select the radio button in Return Value against ‘File URL’ for each File Field

3. Within the ACF ‘Location’, assign the new fields to the relevant post or pages and hit save.

Step 2 – Upload Your Video Files

Choose the edit option for the post or page where you assigned the new custom fields. You can upload the relevant files here. Once completed, save your post or page.

Step 3 – Edit the Template

Select an appropriate template file and the location where you want to place your video.

Copy and paste the code snippet below. You can customize it to match your requirements

Directly Embedding the Video

In case of a short video and relatively small file size, you can choose to host the video on your self-owned web host and stream it without using third-party video hosting services. For example, Cloudinary is a popular third-party hosting service that offers CDN and real-time video optimization services. You can then use an HTML5 video player for video playback.

Here is a sample code. As you can see, you can define the height, width and the video sources among other things.

5 Popular Plugins for HTML5 for Video on WordPress Sites

In this section of the post, we attempt to list 5 WordPress video player plugins that will help make your videos look better and may also improve the general look and feel of your website. Let’s get started!

VideoJS

Video JS is built using the VideoJS HTML5 video library as a base. It allows users to place videos on a page or a post using HTML5. It also supports Flash for browsers that are not compatible with HTML5. You can view a demo here – http://videojs.com/

VideoJS comes with a settings page that you can access via the visual editor. Screenshot below-

Some of its more popular features include the ability to preload, autoplay and loop videos, include captions, control size and position of the video, etc.

Spider Video Player

Spider Video Player a multi-functional HTML5 and Flash player that can play uploaded or YouTube videos. It allows the user to select from a set of predefined templates or create their own custom template.

Spider Video Player also offers playlists with a detailed control. The basic version of the player comes with a giant spider watermark on the corner of the screen, but it can be done away with by buying the pro version.

HTML5 Video Gallery and Player

The WordPress HTML5 Video Gallery is a comparatively simple and easy-to-use player with the main advantage being the ability to create a gallery of videos via a simple shortcode.

All you have to do is enter your videos into different custom post types and call the different videos through the shortcode.

YouTube Embed

The YouTube Embed video player plug enables you to embed not only a video but an entire playlist from YouTube. To embed videos, click the YouTube button on the top right corner of the post and select ‘Search for a video or channel to insert’ from among the different options on the pop-up window. The plug-in auto-generates a shortcode to be inserted to your post.

FV WordPress Flowplayer

This is a feature-rich video player used primarily for FLV and MP4 files. Essentially, this means it can embed videos from YouTube or Vimeo in addition to user files in MP4 format.

To embed videos, you need to select the box for ‘Embed’ in the plugins ‘Settings’ page. Once selected, you can add video files or links that you want to embed. You can add multiple videos in different formats.

The plugin also allows you to customize the player to include your logo and a splash image, if you so desire, at the end of the video.

Conclusion

Plug-ins are an easy and efficient way to include HTML5 videos in your WordPress site. Videos, when used appropriately, not only help change the look and feel of the website but also attract and engage your visitors.

Irrespective of whether the video plugins you choose are free, paid or customized, it would generally create a sense of interaction and lead to positive user experience, inviting repeat visitors and portray a favorable impression of the organization as a whole.