Tips for Optimizing Self-Hosted Video Backgrounds
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.
- You can host your MP4 video file anywhere you want. It’s not necessary 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.
- You must have a Vimeo Plus, PRO, or Business account to add a background video from Vimeo.
- 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.
Upgrade to Vimeo PRO Today!
Even though Inspiro supports self-hosted videos, it’s much better to host them on a dedicated video platform like Vimeo. With Vimeo PRO, your videos will load faster and you will not have to deal with issues like server bandwidth or slow-loading videos.
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.
If your phone is in Low Power Mode (iOS), then your mobile browser won’t play the video automatically in order to save battery.