1. Adding Videos Through Plugins
WordPress has an inbuilt feature for embedding videos but using plugins gives more flexibility to a website owner. It also eliminates the dependence on a third-party video-hosting service as the clip can be embedded directly. Most plugins automatically generate the shortcode required for completing the process. This is especially useful for amateurs who do not have in-depth technical knowledge. There are lots of plugins available but users must look out for some essential features. An ideal embedding tool will have the option of controlling the size of the clip. It must possess features of displaying captions and adding a watermark to the video. People introduce visual elements to attract visitors to the website and displaying advertisements will help them earn extra revenue while doing so. Other features like preloading or playing the clip on a loop are also sought after by some people. Most browsers support HTML5 tags and therefore it is sensible to use a plugin for playing videos on WordPress websites.
2. Including Videos By Using Custom Fields
People with technical proficiency can add HTML5 videos to WordPress interfaces by using custom fields. These fields let users include extra information to a post. The open-source CMS saves this information as metadata which leads users to refer to custom fields as post meta also. This metadata can be displayed on the interface by using template tags in WordPress themes. People intending to use custom fields for displaying videos must have basic knowledge of HTML and PHP. Let’s take a look at how clips can be added by using this method.
Step 1
We will be using the Advanced Custom Fields plugin for the purpose. Access the admin dashboard of your WordPress installation and access “Plugins” from the menu. Go to Plugins> Add new and enter the name of the plugin in the search field. Install and activate the plugin. Select a video that you want to display along with a poster image. This image can be a screenshot from the clip or a custom graphic.
Step 2
Access the “Custom Fields” tab which will be now visible under “Plugins” in the menu. Select the “Add new” option. Now you have to create an ACF file for each of the video formats that you intend to display. Choose the option of “File URL” in the “Return Value” section of each field.
Assign new fields to all relevant posts or pages within the ACF location and save all the changes.
Step 3
Select the edit option for the post or page where the new custom fields were assigned. Upload all the relevant files here and save the changes.
Step 4
Now the appropriate template file along with the location for inserting the video needs to be chosen.
<?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 Name
$video_poster = get_field(‘poster_image’); // Poster Image Field Name
<br>
// Build the Shortcode
$attr = array(
‘mp4’ => $video_mp4,
‘webm’ => $video_webm,
‘flv’ => $video_flv,
‘poster’ => $video_poster,
‘preload’ => ‘auto’
);
// Display the Shortcode
echo wp_video_shortcode( $attr );
?>
You can copy and paste the code given above but do take care to customize it according to your requirements. This concludes the method of adding HTML5 videos to WordPress websites with custom fields.
3. Embedding Videos Directly In The Website
The third way of inserting a clip on a website is very easy and can be used by anyone. Clips with short duration and small file size can be uploaded directly through your website hosting service. This will eliminate the need of using a third-party video hosting service for the purpose. There are various services that provide the facility for real-time video optimization along with a CDN. An HTML5 video player can be used for the playback.
Given below is a sample code which can be used to define the dimensions, video sources, and other elements.
<video width=”320″ height=”240″ controls>
<source src=”movie.mp4″ type=”video/mp4″>
<source src=”movie.ogg” type=”video/ogg”>
Your browser does not support the video tag.
</video>
Conclusion
Visual elements can be instrumental in raising the levels of interaction and engagement of visitors with a website. These three methods to add HTML5 videos to WordPress websites will help in attracting more traffic and also have a positive impact on the conversion rate of the interfaces.
