Tips for Optimizing Self-Hosted Video Backgrounds in WordPress

Our Video Portfolio themes for WordPress like Inspiro and Reel give you the possibility to set a video in the background in the slideshow.

Such a feature is also available in popular page builders like Beaver Builder, and you can easily set a video as the background of a section.

While a video background looks nice and attracts visitors’ attention, you should be careful and make sure to optimize your self-hosted video before uploading it to your website.

Before you begin

Good to know

• HandBrake is the tool you can use to optimize and save your video file in the right format – MP4 with h.264 encoding.
• The advantage of using a self-hosted video as opposed to hosting it on YouTube or Vimeo, is that it will also play on mobile devices that support autoplay videos.
• Some mobile devices don’t support video autoplay, and in this case, the Featured Image of the post will be displayed instead.
• Most of the browsers restrict videos to autoplay if the sound is enabled, so make sure to set your video on Mute or you can remove the audio data from your video file. This may also reduce the size of the file.
• Keep your video as short as possible. In most cases, 30 seconds is enough. A video longer than 1 minute will take too much time to load, especially on mobile devices with slow connectivity. The optimal size for a video is 5-10 MB.
• You can host your MP4 video file anywhere you want. It’s unnecessary to upload it to your website if you don’t have a good hosting package.
• If you have a Vimeo PRO account, you can host your self-hosted video there and simply copy the direct link to the video file (MP4). View details here or here.

Vimeo Videos

• You must have a Vimeo Plus, PRO, or Business account to add a background video from Vimeo without any controls (background mode).
• If you enter the public video URL (e.g. https://vimeo.com/295116835), then this will play only on desktop computers. You have to insert the direct link to the video file (MP4) if you want it to play on mobile devices too. View details.

How to Optimize Self-hosted Video Background

Here are some tips for using video background without slowing down your website:

• • Keep the video file small. Try to compress and reduce the quality of your video using HandBrake app to get a video of about 5-10 MB. Anything larger than that will take longer to load, especially on mobile devices with a slow data connection.
  • Try exporting to 720p at 24 frames per second and a low bit rate. Here’s where you can configure these details in HandBrake:
    You don’t need to worry about the quality of your video, as it’s more important to have it properly optimized and make sure it loads fast.
  • Strip the audio out of the video. Browsers usually won’t play the audio when it’s in the background, so the audio is just making the file bigger.
  • Keep your video as short as possible. In most cases, 30 seconds will be enough. A video longer than 1 minute will take too much time to load, especially on mobile devices with slow connectivity.
  • If you want a higher-resolution video or a longer video or an audio track, use the Video Lightbox feature along with an optimized video background.

🎬 Check out our Video Portfolio Themes for WordPress

With our WordPress themes, you can build a portfolio website that showcases your work and helps you connect with customers. We’ve included all the features you need to ensure your site runs smoothly and looks great, including a video portfolio, YouTube & Vimeo integration, and much more!

View our Video Portfolio Themes →

Related Docs

• 20 Full Site Editing Tips and Tricks [Video]
• Adding background videos on hover
• Enable MP4 Video Support on Your Linux/Apache Server
• How to fix Google Maps not loading in Unyson Page Builder
• How to Fix the WordPress Custom Post Type 404 Error
• How to Increase the Maximum Upload File Size in WordPress
• Optimize Slow Loading Speed in Videozoom and other WPZOOM Themes