How to Add a Video Background to a WordPress Site

Searching for the easiest way to add a WordPress video background?

Well-made video backgrounds grab attention and make brands look cool from the very start. But when done poorly, a video background slows down your site, takes up space, and confuses new visitors. That’s why we made this guide so that you can avoid all pitfalls, and instead, learn how to add a WordPress video background the right way.

👨‍🎓 Keep reading to learn about the best practices and steps to add a video background to your WordPress website, all without any special technical knowledge.

Best practices for adding a WordPress video background

• Keep file sizes low but resolution high: Nothing bogs down your site’s performance more than large videos and images; yet, it’s preferable to maintain resolution during compression.
• Don’t overdo it: Too many videos clutter your interface; only use them to make a point or showcase something relevant.
• Include a call to action with additional information: Don’t leave viewers wanting more, then forget a link leading to further details.
• Avoid audio at all costs: It’s jarring when all people just want to view your website.
• If audio is required, don’t have it on autoplay: Provide an option for users to play audio.
• Consider closed captions for videos with audio: Not everyone can listen to your audio, whether that’s because of their location or hearing impairment.
• Host externally: Your site host probably isn’t designed to serve videos, so choose sites like Vimeo and YouTube to maintain performance, or consider a specialty video hosting site.
• Stick to the best formats/resolutions: We’re talking MP4s only; a minimum of 720p; h264 codec.

And remember, not all websites need video; sometimes it just makes the interface cluttered, slow, and unfocused. A lawyer, for example, should stick to professional photos rather than corny handshaking videos that are bound to slow down their website.

How to add a WordPress video background

There are several methods that activate video background features within WordPress.

We’re going to focus on four different code-free solutions:

1. The built-in Cover block
2. A background/header plugin
3. Your favorite page builder plugin
4. Using a theme that supports video backgrounds or headers

Follow the steps for each method below. 👇

Option 1: Built-in Cover block

The native WordPress editor offers what’s called a Cover block to insert background images behind other content, such as text and buttons.

What many WordPress users don’t realize is that the Cover block also supports video backgrounds.

Step 1: Add the Cover block

To get started, go to whichever page you want to add the background and add the Cover block.

Step 2: Upload your video

For the Cover, pick the Upload or Media Library button, whichever one you intend to use to add video.

The Cover block says nothing about supporting videos, so you just have to make sure to choose a video (like an MP4) from the Media Library. Click the Select button once you have a video checked off.

Step 3: Insert overlaying foreground content

You should now see a preview of the background video. You are welcome to add foreground blocks to the Cover, such as text or buttons.

Step 4: Edit the Cover settings as needed

Cover settings include:

• Color overlays: ideal for making it easier to read text
• Opacity: also helpful for revealing foreground content
• Minimum height of cover: sometimes necessary to make the WordPress video background cover more space

Step 5: View your WordPress video background in action

Once you’re done, save the page, and go to the frontend to see your WordPress video background!

Quite a few plugins exist for adding WordPress video backgrounds, some of which offer full site backgrounds, while others are catered toward giving you a video header.

These are the best video background plugins:

➡️ Our favorite is the Advanced WordPress Backgrounds plugin; we’ll show you how to add a WordPress video background with that plugin in just a few steps.

Step 1: Install AWB and add its content block

To begin, install Advanced WordPress Backgrounds (AWB).

Go to the page where you want to add the background video.

Using the WordPress editor, click to add a content block. Search for and select the Background (AWB) block.

Step 2: Add your video

This gives you options to add color, image, or video backgrounds to the element.

Pick Video, then paste in a Video URL from YouTube or Vimeo. As an alternative, the plugin has a Self Hosted tab for uploading local videos.

Step 3: Expand the height and width of the video background

By default, the content block doesn’t stretch to cover much of the page area. You must click the Full Height button in the editor. There’s also a button to extend the video background to fullwidth.

You can also drag or insert content, such as text, buttons, or images, on top of the background video.

Step 4: Modify the WordPress video background settings

Adjust whichever setting you want in the Block tab: start time, end time, looping, always playing, video opacity.

It’s wise to add a background color overlay with decreased opacity; this makes the overlaying text easier to read.

Do this by going to the Block tab and changing the color to white or black under Background Color. Move the Opacity slider down a bit to ensure the background still shows.

Step 5: View the results

The result is a video playing in front of other content, ideally one that loops, doesn’t have sound, and still keeps most of the focus on the foreground content.

Option 3: Your favorite page builder plugin

Most page builders, like Elementor, WPBakery, and Divi, offer background features to add an image or video background to just about any content module.

➡️ Feel free to choose the page builder of your liking, but we recommend Elementor due to its ease-of-use.

Be sure to install Elementor or whichever builder you intend to use before getting started.

Step 1: Open a page with the Elementor editor

Go to Pages on WordPress, and select the page designated as your Homepage. Click the Edit With Elementor button.

Step 2: Add a Section content block

Most content modules in Elementor offer background settings, but we recommend inserting a Section. That way, you can add multiple items into the section, like text, images, and buttons. Then, you add a video background to the section so that it’s behind everything in the foreground.

We added some text and a button to a section in our tutorial. Go ahead and select the Edit Section icon, then select the Style tab.

Step 3: Insert your video background

Here, you’ll see a Background dropdown area. Pick the Video option next to Background Type. Then paste in a URL from YouTube, Vimeo, or a local file in the Video Link field.

Step 4: Edit the video background settings

You may need to expand the video background to take up more of the screen. To do so, switch to the Layout tab, and adjust Height and Minimum Height.

Back under the Style tab, consider changing settings for the background video:

• Start time
• End time
• Play once
• Play on mobile
• Privacy mode

Furthermore, think about adding a Background Overlay—usually a neutral color like black or white, and some opacity changes—to make text, buttons, and images in the foreground more visible.

Step 5: View the WordPress video background on the frontend

When you’re done, the video plays behind all the content in the section!

Option 4: Use a WordPress theme that supports video backgrounds/headers

Various WordPress themes offer built-in header, slider, and full-page media settings; these allow you to upload an image, GIF, or video to take up the entire screen, most often used as a header to your homepage.

To find themes with video background features, search for “video background” on popular marketplaces:

➡️ Be sure to scan feature lists, or even ask the developer before downloading/purchasing, to ensure a theme has video background functionality.

As an example, the Colibri WP theme offers video backgrounds.

Step 1: Install and activate the theme

To activate a video background, install the Colibri WP theme, then go to Appearance > Colibri Settings > Get Started. Here, you can activate the Colibri Page Builder feature.

Step 2: Add a demo site

Click on the Demo Sites tab and Import the demo template of your choosing.

Step 3: Customize the Hero image

Navigate to Appearance > Customize, and select the Settings gear icon next to the Hero module.

Step 4: Add a video background

Select the Style tab, and switch the Background to Video.

Finally, either pick YouTube to paste in an External Video URL or Self Hosted to upload local video.

As a result, you’ll see the video background in motion on the Customizer preview.

Get started with the perfect video background

In this post, you learned four different methods, at least one of which should work for your situation.

ℹ️ For some other ways to improve your site, check out our post with 10 elements of a successful homepage design.

For any questions about WordPress video backgrounds, share your thoughts in the comments below.