According to a study by Cisco, global video traffic will be 82 percent of all consumer Internet traffic by 2021. With Instagram Live, Periscope and other services, live video has been bubbling for a while. Add to that the fact that 64% of consumers are more likely to purchase a product on a retail website after watching a video, it is no surprise then that 70% marketers report videos to be a better conversion medium.
However, how do you leverage the most advantage from a video once you’ve added it to your website? You don’t want the performance of the video to negatively impact the load time of your webpage. This article lists out 5 tips you can use to optimize the videos on your WP blog. Right from technical details like codecs through to self vs. hosted videos to videos for multiple devices, we have you covered.
Uploading and Adding Video File Types to WordPress
After the latest WordPress update, uploading videos to your WP site has become much simpler. We’ve listed the steps below:
- Click ‘Add Media’ from within a post or a page. Click the ‘Upload Media’ tab on the top of the page –
- Next, click ‘Select Files’ button –
- Select the video file you wish to upload and follow the prompt
- After the file has been successfully uploaded, you can enter a title, caption, and description as needed towards the right of the page. You need to ensure that the Embed Media Player option is selected.
At the final step, click ‘Insert into post’ and your video will be added along with a thumbnail. You can use plugins to upload the video if you’re not going to store it on your WordPress server.
When it comes to encoding videos, there are specific file extensions that WordPress allows for video uploads. These include –
- .MP4, .M4V (MPEG-4)
- .WMV (Windows Media Video)
- .OGV (Ogg)
- .AVI
- .MPG
- .MOV (QuickTime)
- .3GP (3GPP)
- .3G2 (3GPP2)
In case you would like to add videos in formats not allowed by default, here is the code you would need to add to functions.php–
add_filter('mime_types', 'custom_upload_mimes');
function custom_upload_mimes ( $existing_mimes=array() ) {
$existing_mimes['extension'] = 'mime/type';
$existing_mimes['doc'] = 'application/msword';
return $existing_mimes;
}
In case you need to replace a file type from the pre-defined list of accepted file types, you can add this code –
add_filter('mime_types', 'custom_upload_mimes');
function custom_upload_mimes ( $existing_mimes=array() ) {
$existing_mimes['extension'] = 'mime/type';
$existing_mimes['doc'] = 'application/msword';
unset( $existing_mimes['exe'] );
return $existing_mimes;
}
Self Hosted Videos – Is it a Good Idea?
There are two options when it comes to choosing where your videos are stored – Self-hosted and hosted.
Self-hosted videos are those that are stored on your server that also hosts your WordPress site. Hosted videos, on the other hand, implies that your videos are stored in a different location and embedded or linked to your site.
There are a number of different reasons focused on video performance as to why you would choose one option over the other. Here are some pointers to help you make the decision.
In case you plan to display a number of HD videos, there is a possibility that you will exhaust the storage and bandwidth limit of your server pretty quickly. In this case, it might be best to host your videos at a different location. You could use video optimization plugins to compress the video before they are sent to the server. This would improve the video performance on your site.
What hosting options do you have?
The hosting option you choose is important. If you’re self hosting, you might have to use a dedicated hosting with sufficient bandwidth.
Shared Hosting & VPS hosting – Although it might be okay to store a few static video resources of smaller size on your shared/VPS hosting, you’ll be limited by the bandwidth offered by your host.
Dedicated Hosting – Depending on your infrastructure setup, you should be able to do quite a bit with your videos when using dedicated hosting. However, as you add to your video library, you may need to consider an upgrade in the future.
Optimize your Site and Server for Speed – Ensure that your server has sufficient RAM and a generous processor speed. As a general rule, a 1GB video should fit comfortably in your hosting plan as long as it has 2.5 GB of RAM and a dual-core processor with 1500 MB of storage space.
Ensure you have Sufficient Bandwidth – The amount of bandwidth depends on the number of visits you expect. If you foresee a spike in visits, you need to consider the amount of bandwidth your site can leverage. Typically, a 1GB video played or downloaded 1000 times requires 1TB of bandwidth.
Hosting Your Videos in the Cloud
A popular alternative to hosting your own videos is hosting it on Youtube, Dailymotion and other video sharing platforms. They have unlimited bandwidth and you don’t have to pay a dime. You can them embed the videos on your pages using WordPress’ HTML5 player or a third-party player.
If you’re not happy sharing your videos on social video platform like Youtube, you can instead host it over at a video cloud hosting solution like Cloudinary, JW Player etc. You can then embed the video using an HTML5 video player plugin offered by these vendors. These cloud solutions offer dynamic video transcoding functionality too. For instance, you can customize the quality of the video on the fly so that the users with slower connections can load a version of the video with smaller file size.
Furthermore, if you have expertise with AWS or a similar cloud platform, you can use an object storage service like AWS S3 or Google Firebase storage. You can add additional modules for video optimization and video tagging. Firebase for instance has a ML-Kit that covers many of the everyday AI requirements like video tagging and classification.
Displaying Responsive Videos in WordPress
If you use the default WordPress player, your videos would usually be fully responsive. However, this can be a problem, especially when using untested players on iframe to display videos.
The initial step to ensure your iframes support responsive videos is to download the FluidVids.js script by Todd Motto on GitHub. It’s particularly optimized for video performance.
Next, upload a copy to your media library, to each page file you plan to use for your theme – or, at a minimum, the type of page where you wish to display videos.
You can add this script to your /wp-content/themes/your-theme/page.php file to display responsive videos embedded with iframes on your WordPress pages. You can edit the file and call the script toward the top of the page, after all the initial page notes.
<script src="dist/fluidvids.js></script>
What Settings Should You Use?
The settings you need to use to ensure your videos display well might be different for different users, especially when using a video hosting service as each service comes with their own recommended settings.
In case of self-hosted videos though, a general rule applies. Here are some recommended settings –
MP4 H.264 (AAC or MP3)
The MP4 container format with the H.264 video codec and the AAC audio codec is natively supported by desktop/mobile Internet Explorer, Safari, Chrome and Firefox.
Video
- Codec: H264 (High profile)
- Frame Rate: 24, 25 or 30 (Constant)
- Frame Size / Resolution: 1280 x 720 (720p)
- Fields: Progressive
- Bitrate: 5000 – 10000 kbps
Audio
- Codec: AAC-LC
- Bitrate: 320 kbit/s
- Sample Rate: 44.100 OR 48,000 kHz (retain original sample rate)
WebM
The WebM format uses the VP8 or VP9 video codec and the Vorbis or Opus audio codec. WebM is sponsored by Google and supported natively on Firefox, Opera, Chrome, and VLC Media Player.
Video
- Filename Extension: .webm
- MIME-type: video/webm
- Audio-only MIME-type: audio/webm
- Video Codec Name: VP8 or VP9
- Audio Codec Name : Vorbis or Opus
Audio
- Ogg Theora Vorbis
- Ogg Opus
Summary
In this article, we’ve covered the steps that you need to follow to improve the performance of videos on WordPress. Next time you’re about to add videos, give it thought whether your host is capable of providing you bandwidth and storage space that meets your requirements.
If you have any thoughts to share, let us know in the comments.
