How to Add a Video Background on WordPress

BySheilla Luciana

Have you noticed the recent website trend of using video as a background? While they can make your site more engaging and fun, there’s also a risk of slowing down your page load times if not properly optimized. Some might question whether having a video is necessary at all. However, when done correctly, a video background can be a compelling factor that sways potential clients in favor of your services.

In this article, I’m going to share with you some best practices for ensuring good UX practices and maintaining page speed while still making a visual impact with video backgrounds. I will also show you how to use Kadence Block to upload a background video.

Softwares I use to edit and compress videos

Since I’m not a professional video editor, I rely on tools that I already have access to or use free options available:

Canva: I use Canva to edit my videos, such as trimming and general editing. I use the playback function for slow-motion effects and try to keep each video under 30 seconds. The final result is saved in .mp4 format.

HandBrake: This popular free software allows you to reduce the file size of your videos while maintaining decent quality. Once I have my .mp4 video file ready, I use this tool to compress the size. You can even convert to .webm format if you want to compress it more, but most of the time I don’t really need to.

Tips to ensure your video background enhances your site without compromising speed

  • Duration
    Aim for a short video, ideally under 30 seconds, to keep your site quick and responsive.
  • File Size
    Try to keep the video file size under 1MB for quicker loading times, ensuring a smooth experience for users on all types of internet connections.
  • Looping
    Set your video to loop seamlessly. Since background videos are short, a smooth loop ensures a consistent and non-distracting backdrop.
  • Mute Audio
    Background videos should be seen, not heard. Muting the audio prevents distractions and keeps the focus on your site’s content.
  • Subtle Movement
    Choose a video with gentle motion. Overly dynamic backgrounds can detract from your main content, so opt for something that complements rather than competes.
  • Fallback Image
    Use a high-quality image as a backup for situations where the video is disabled (like on mobile devices) or doesn’t load. This keeps your site looking polished in any scenario.
  • Accessibility and Usability
    Make sure the video doesn’t interfere with the readability or navigation of your site. Any text overlay should be clear, and interactive elements easy to engage with.
  • Disable Video on Mobile and Tablet
    It’s best to disable video backgrounds on tablets and mobile devices entirely and replace them with a background image. This is more than just making the video invisible; by preventing the video from loading, you ensure your site remains fast and efficient on all devices.

Uploading videos to WordPress

To upload a video background on WordPress, I use a plugin called Kadence Blocks. Kadence Blocks is a collection of powerful blocks that enhance the Gutenberg editor, and it allows for advanced customization and design options. It integrates seamlessly with a Kadence Theme, but you can also use Kadence Blocks independently without a Kadence Theme, as long as you are using the Gutenberg editor to edit your site.

Fortunately, Kadence Blocks is equipped with the necessary tools for you to have a video background that complies with all the points above: looping, mute audio, fallback image, disable video on mobile and tablet, accessibility, and usability.

How to use Kadence Blocks to upload a background video

The block we’re going to be using from Kadence Blocks is called Row Layout. The Row Layout block acts as a container where you can place your content, and it allows you to organize that content into several columns.

Here is how we can use the Row Layout block to upload a background video:

Add the row layout block

In your WordPress page editor, click on the plus icon to add a new block. Search for ‘Row Layout‘ and select it. It will ask you to choose how many columns you’d like to have for this Row Layout, choose one.

Access the block settings

Click on the Row Layout’s block to access the settings in the right-hand sidebar. If you don’t see this settings, you can click the Settings icon at the top right corner of your screen.

Set background video

In the blocks settings, navigate to the Style tab and then to Background Settings. Under ‘Type‘, choose ‘Video‘. For ‘Background Video Type‘, choose ‘Local (MP4)‘ if you will be hosting the video yourself. Alternatively, you can host the video on external platforms like YouTube or Vimeo. Click ‘Select Video‘ to upload your video.

Make sure the options for muting and looping the video are turned ON.

Set up the background image for mobile and tablet

As mentioned earlier, it’s best practice to disable background video in mobile and tablet to ensure our site remains efficient on all devices. Click the tablet icon on the Background option. Toggle ON for ‘Set custom background for tablets‘. Under ‘Background Image‘, click ‘Select Image‘ to choose an image from your existing media library or upload a new one. Mobile settings will inherit tablet settings, so you don’t have to adjust anything further at this point.

Set the Row Layout’s height

Next, let’s set up the height of the video by adjusting the Row Layout’s height. Go to the Advanced tab , and then to the Structure Settings tab. Under ‘Minimum Height‘, set the height to 70vh or any height you like. 70vh means 70% of the screen height. You can use pixel units if you prefer. You can also adjust the minimum height on tablet by clicking the tablet icon.

So there you have it, how to add a video background to your website. Don’t forget to hit ‘Update’ to save your changes.

Ideas
Notes

Remember, video backgrounds are designed to be interactive and visually engaging elements that add aesthetic appeal to your page. They are not meant to convey extensive information. If you need to show a detailed video with sound that runs for several minutes, it’s better to use a dedicated video player instead of a background video. This approach ensures that your content is appropriately presented and that your site’s performance remains optimal.