How to Embed HTML5 Video in WordPress

“If a picture is worth a thousand words, what’s a video worth?” This isn’t only your wonder but others also keep getting confused about the importance of videos. Besides images and many other types of viral content, videos have become a revolution in online marketing.

Videos can be used to introduce your products, attract new visitors, engage the existing ones, and bring back those who have visited your site. Displaying a video on your page also helps increase your rankings in Google search.

These benefits might encourage you to display a video to your WordPress immediately. You can add videos to your pages or posts in 2 common ways, either embedding a Youtube link or uploading a video from your computer.

Do you know about another option of using an HTML5 player to add videos to your WordPress site? Since you own the video yourself without a third-party assistant, it’s easier to manage your file permissions.

In this article, we’ll discuss the importance of an HTML5 video player and how to use it to upload as well as protecting your private videos.

Why using an HTML5 video player

#1 Limitations on uploading videos to WordPress

WordPress, by default, doesn’t allow you to streamline videos on your pages or posts. This means that when you upload and embed a video in your content, it will be displayed as a downloadable link, not a video.

Visitors have to click on this link and download the video in order to view it instead of watching the video right on your site. An HTML5 video player permits you to display uploaded videos on your site without much hassle.

#2 Third-party video hosting platforms

Most WordPress site owners choose Youtube to show videos on their site. They don’t have to host the video themselves which helps save a lot of website bandwidth. Simply place a Youtube URL on your page or post and the video will play automatically.

However, there is no way to manage your video permissions and control who should have access since it’s visible to the public.

#3 Benefits over Flash players

Compared to old Flash players, making use of an HTML player brings more benefits to your WordPress videos.

  • Most HTML5 video players support most browsers, including Firefox, Chrome, Internet Explorer, Safari, and Opera.
  • Adding links to your videos has never been easier thanks to HTML players. You’re able to promote other products or provide users additional information.
  • It’s simple to customize your videos on basic elements like gradients, reflections, and borders. On top of that, you can modify the animation and transition effects.

How to add HTML5 Videos to your WordPress site

There are thousands of HTML5 plugins, both free and premium, assisting you in inserting videos on your website. However, they simply play video files on pages, posts, custom post types, or archive pages.

Protect WordPress Videos & Audios, a powerful extension of Prevent Direct Access Gold (PDA Gold) appears to be a more comprehensive solution.

Benefits of using Protect WordPress Videos & Audios over other HTML5 players

 

  • Upload and protect self-hosted videos on WordPress

As the name suggests, Protect WordPress Videos & Audios not only comes with a standard HTML5 video player but also helps protect video files. Instead of displaying a downloadable link whenever embedding a video to your content, you can show a live video.

  • Protect HTTP Live Streaming videos

Protect WordPress Videos & Audios also supports videos larger than 100 MB with no Flash required. You can use the HLS (HTTP Live Streaming) method and host your large videos on Amazon S3. As a result, it won’t decrease your page loading time or take up your hosting server bandwidth.

  • Expire video protected links

Once protected by the plugin, your videos won’t show up with the original URLs but private download links. These links will expire after every 5 seconds to make sure the video plays smoothly and at the same time prevent URL sharing.

Since Protect WordPress Videos & Audios is just an extension of Prevent Direct Access Gold, you have to install both the main plugin along with the add-on to make it work properly. You can refer to how to install the PDA Gold plugin and its extension in this documentation.

There are 4 different ways to protect your WordPress videos using Protect WordPress Videos & Audios, including self-hosted videos, HLS videos, Techsmith videos, and videos hosted on Amazon S3.

#1 Secure WordPress self-hosting videos

Upon installation and activation, you can start using the plugin to prevent unauthorized users from downloading your private videos. You’re able to secure video files from editor toolbar in your post edit screen and by adding a shortcode. Follow these steps:

Protect video via the editor toolbar

  • Classic Editor
  1. Head to pages, posts, or custom post types you intend to insert the video
  2. Click the Protect WordPress Videos & Audios icon on the toolbar
  3. Select a video you plan to protect from the plugin popup. Adjust the video width and height of the video if necessary
  4. Hit Insert video button

That’s it! Your video is embedded in the content and becomes secure now. Visitors are able to view without downloading it despite using any downloader tools.

Gutenberg editor

You’re using the Gutenberg editor on your site rather than the Classic one? Here is how to use the plugin with this page builder:

  1. Create a new or edit your existing post
  2. Search and add the “Protected Video” block into the content
  3. Click Add media then choose your desired video file and protect it

Correspondingly, your video becomes protected now. You can also decide its sizes as well as the autoplay capability too.

Protect videos using shortcode

You’re a developer and more confident with coding than using editors ? This method is definitely for you. Simply copy the shortcode below and enter in your content:

[*protected_video mp4="Input your video/audio URL here" width="512" height="308"id="897798" class="your-custom-class" autoplay="true" poster="your poster's image URL" video_id=888]

Remember to replace the video_id=888 with your own video’s ID. You can get this number right in the video’s URL under the WordPress media library. For example https://pda.com/wp-admin/post.php?post=888&action=edit.

#2 Protect videos hosted on Amazon S3

In case your videos or audios are too large to upload to your WordPress website, consider hosting them on Amazon S3. This service allows you to store any amount of data at any time, from anywhere on the web.

The guide below shows you how to secure S3 videos in less than 5 minutes:

  1. Create a private S3 bucket. This requires you to log into the AWS Console
  2. Set up Cloudfront distribution
  3. Go to your bucket and click on the video’s name to get the S3 link. For instance, https://s3-ap-southeast-1.amazonaws.com/my-bucket/my-private-video.mp4
  4. Copy the following shortcode and paste to your content
    
    

For the other 2 methods of securing HTTP live streaming (HLS) HTML5 videos and TechSmith Camtasia Videos, please refer to your detailed documentation for more information.

Have your private videos and audios protected now!

Are you a guitarist, a healthy food blogger, or a gym trainer running a membership or a private site to sell videos? Whatever you are in these cases, you definitely want to protect your valuable videos so that only paid members can view without downloading them.

Protect WordPress Videos & Audios extension working with its main Prevent Direct Access Gold plugin enables you to control who is allowed to view them. Since nobody can get your video file URLs or download them, you don’t have to worry about video fraud and sharing problems.

Install PDA Gold and Protect WordPress Videos & Audios to have your videos protected today!