How to Add a Video Background in WordPress (4 Methods)

Estimated reading time: 18 minutes

To add a video background in WordPress, you can use a theme with built-in video support, the Cover block in the block editor, a dedicated plugin like Advanced WordPress Backgrounds, or a page builder like Elementor. Each method supports different video sources and offers different levels of customization.

A video background is a short, looping video clip that plays silently behind your page content. It replaces a static image or solid color in your hero section (the prominent banner area at the top of a page) and immediately gives visitors something dynamic to look at.

Video backgrounds work well for portfolios, business homepages, landing pages, and any site where you want to make a strong first impression. The key is choosing the right method for your setup and making sure the video doesn’t slow your site down.

This guide covers four methods to add a video background in WordPress, along with video preparation tips, performance best practices, and mobile optimization.

---

---

Prepare Your Video Before Adding It

Before you pick a method, you need the right video file. A poorly prepared video will slow your site down or refuse to play on certain devices.

Choose the Right Format and File Size

MP4 with the H.264 codec is the standard format for WordPress video backgrounds. It works across all major browsers and devices. WebM is a secondary option that works in Chrome, Firefox, and Opera, but MP4 alone covers most situations.

For the best balance between quality and performance:

• Resolution: 720p (1280×720) is enough for most backgrounds. 1080p works for full-screen hero sections but increases file size significantly.
• File size: Keep self-hosted videos under 5MB. Smaller is always better.
• Length: 10 to 30 seconds. Long enough to provide visual interest, short enough to loop smoothly.
• Audio: Remove the audio track entirely, or make sure the video is muted. Browsers block autoplay for videos that include sound.

Use a tool like HandBrake (free) to compress your video before uploading it to WordPress.

Self-Hosted vs. YouTube/Vimeo

You have two options for where your video lives:

	Self-Hosted	YouTube/Vimeo
Performance	Adds load to your server; larger files slow page speed	Video streams from external servers; lighter on your site
Control	Full control over playback, no branding, no related videos	YouTube may briefly show titles; Vimeo free shows controls
Setup	Upload MP4 to Media Library	Paste a URL
File size limit	Limited by your hosting plan’s upload size	No practical limit
Compatibility	Works with all methods	Not supported by the Cover block
Best for	Short, optimized clips under 5MB	Longer or higher-quality videos

Quick recommendation: If your video is under 5MB, self-hosting is fine. For anything larger, use YouTube or Vimeo to avoid performance issues.

Where to Find Free Stock Video

If you don’t have your own footage, these sites offer free stock video suitable for backgrounds: Pexels, Pixabay, and Coverr. Search for slow-motion, abstract, or landscape clips. They loop well and don’t distract from your content.

---

Method 1: Use a WordPress Theme with Video Background Support

A theme with built-in video background features gives you the most integrated experience. The theme handles video playback, fallback images, and mobile behavior without extra configuration.

Inspiro Premium (Video Slideshow Widget)

Inspiro Premium is built for video and photo websites. The recommended way to add a video background is with the Video Slideshow widget, an Elementor widget included in the WPZOOM Addons for Elementor plugin. You only need the free version of Elementor, Elementor Pro is not required.

To set up a video background slideshow in Inspiro Premium:

1. Make sure Inspiro Premium, Elementor, and WPZOOM Addons for Elementor are installed and active.
2. Go to Pages > Add New (or edit an existing page).
3. Under Page Attributes, select the Page Builder (Transparent Header, Without Title) template for a full hero section.
4. Click Edit with Elementor.
5. In the Elementor sidebar, scroll to the WPZOOM PRO section and drag the Video Slideshow widget onto the page.
6. Click + Add Item to create a slide. For each slide, choose a video background and paste a YouTube, Vimeo, or self-hosted MP4 URL.
7. Add a title, subtitle, and optional CTA button. You can also enable a Lightbox play icon that opens the video in a popup overlay.
8. Use the Style tab to adjust slider height, background overlay, text styling, and navigation controls (arrows, dots, or both).
9. Click Publish.

The Video Slideshow widget supports multiple slides, so visitors can cycle through different video clips on your homepage. Each slide can use a different video source — mix YouTube, Vimeo, and self-hosted files across your slideshow. For full setup details, see the Inspiro Premium Video Slideshow documentation.

Inspiro Lite (Free)

Inspiro Lite supports video backgrounds through the block editor or Elementor. The fastest way to get started is by importing a Starter Site and editing the existing hero section.

To add a video background from scratch in Inspiro Lite:

1. Go to Pages > Add New.
2. Under Page Attributes > Template, select Page Builder (Transparent Header, Without Title).
3. Add a Cover block and upload your MP4 video file via Upload or Media Library.
4. Add headings, buttons, or other blocks on top of the video.
5. Publish the page and set it as your homepage under Settings > Reading.

The Cover block only supports self-hosted MP4 files. If you want to use a YouTube or Vimeo video in Inspiro Lite, edit the page with Elementor instead: add a section, go to Style > Background > Video, and paste your video URL.

Mobile note: Self-hosted MP4 and Vimeo videos will autoplay on mobile devices. YouTube background videos will not autoplay on mobile due to platform restrictions outside WordPress’s control. Always set a fallback image for mobile visitors.

For the complete setup guide, see the Inspiro Lite Hero Area documentation.

Other WordPress themes with video background support include Reel, a video portfolio theme with built-in video lightbox and background options.

---

Method 2: Use the Cover Block (No Plugin Needed)

The Cover block is built into the WordPress block editor, so you can add a video background to any page without installing a plugin or using a specific theme.

The Cover block lets you layer text, buttons, and other blocks on top of a video or image background. It’s the fastest way to create a hero section or banner with video.

To add a video background with the Cover block:

1. Create a new page in Pages > Add New, or edit an existing one.

2. Click the + icon to add a new block. Search for Cover and add it.

4. Click Upload or Media Library to add your video. The Cover block supports MP4 files, it does not accept YouTube or Vimeo URLs.

5. Once the video loads, you’ll see a preview in the editor. Click the “Write title…” placeholder to add text on top of the video.

6. Adjust the settings in the right sidebar:

• Overlay: Add a semi-transparent color layer to improve text readability. Adjust the opacity under the Styles tab. An overlay is a color that sits between your video and your text content — without one, light text on a bright video can be difficult to read.
• Focal point: Choose which part of the video stays visible as the block resizes.
• Poster image: Upload a static image that displays while the video loads or on devices that don’t support autoplay. This is your fallback image — a static image that appears when the video can’t play, such as on mobile devices.

7. Click Publish or Update.

Limitations of the Cover block: It only supports self-hosted video files (no YouTube or Vimeo). You can’t set start/end times for the video, and customization options are more limited than a page builder or plugin. For YouTube or Vimeo video backgrounds, use a plugin (Method 3) or Elementor (Method 4).

Quick Tip: Keep your Cover block video under 5MB. If the file is larger, consider compressing it first or switching to an external hosting approach with a plugin instead.

---

---

Method 3: Use a Video Background Plugin

If you need more control than the Cover block offers — or you want to use a YouTube or Vimeo video as your background — a plugin is the way to go.

Advanced WordPress Backgrounds (AWB) is a free plugin that adds video and parallax background options to the block editor. It supports self-hosted video, YouTube, and Vimeo, and it works alongside the standard WordPress blocks. If you’re new to plugins, here’s our guide on how to install a plugin on WordPress.

To add a video background with AWB:

1. Install and activate the Advanced WordPress Backgrounds plugin.

2. Create a new page or edit an existing one.

3. Click the + icon to add a block. Search for Background (AWB) and add it.

4. You’ll see an empty block with a + sign in the middle. Click it to add content blocks (heading, paragraph, buttons) that will display over your video.

5. Select the AWB block and go to the Settings tab in the right sidebar. Click Video and choose YouTube/Vimeo or Self-hosted.

6. Add your video URL or select a file from your Media Library.

7. To make the video fill the screen, click the Full Height icon in the block toolbar.

8. Publish the page.

AWB also supports parallax scrolling effects on video backgrounds, which creates a sense of depth as visitors scroll. You’ll find those options in the block’s Advanced settings.

Another option worth noting is the Video Background Block plugin, which is a lightweight free plugin that adds a dedicated Gutenberg block for video backgrounds with built-in overlay and fallback image controls.

---

Method 4: Use Elementor Page Builder

If you’re building your site with Elementor, you can add video backgrounds directly through the page builder interface. Elementor is one of the most popular WordPress page builders, and its video background feature works with both the free and Pro versions.

To add a video background in Elementor:

1. Open a page and click Edit with Elementor.

2. Add a new section by clicking the + icon. Choose a one-column layout for a full-width video background.

3. Click the six dots icon at the top of the section to open section settings.

4. Go to the Style tab. Under Background, click the video icon in the Background Type field.

5. Paste your video URL in the Video Link field. Elementor accepts YouTube, Vimeo, and self-hosted MP4 links.

6. Configure additional options:

• Start/End Time: Trim the playback to a specific segment of the video.
• Background Fallback: Upload a static image that displays if the video fails to load or on mobile devices.
• Play Once: Toggle whether the video loops or plays a single time.

7. To adjust the section height, go to the Layout tab and set the Height to Min Height with a value of at least 400px.

8. Add content elements (headings, buttons, text) to the section as you normally would in Elementor.

9. Click Publish.

For additional visual control, open the Background Overlay section under the Style tab. You can add a color or gradient overlay with adjustable opacity and blend modes to fine-tune how the video looks behind your content.

Note: Elementor’s video background feature works in both the free and Pro versions, though some advanced overlay and responsive controls are Pro-only.

---

Performance and Mobile Best Practices

A video background that loads slowly or breaks on mobile does more harm than good. Here’s how to avoid that.

Keep Your Video Background Fast

Large video files are the most common reason video backgrounds hurt site performance. A single uncompressed video can add seconds to your page load time and negatively affect your Core Web Vitals scores, the metrics Google uses to evaluate page experience.

To keep things fast:

• File size under 5MB for self-hosted videos. Aim for 2-3MB when possible.
• Use YouTube or Vimeo for videos larger than 5MB. The video streams from their servers instead of yours.
• Compress before uploading. Use HandBrake, Adobe Media Encoder, or an online tool like CloudConvert.
• Avoid multiple video backgrounds on a single page. One is usually plenty.
• Enable lazy loading if your theme or caching plugin supports it. This prevents the video from loading until the visitor scrolls to it.

For more on speeding up your site, see our WordPress speed optimization guide.

Make Video Backgrounds Work on Mobile

Most mobile browsers won’t autoplay videos that include sound. Some mobile browsers don’t support background video autoplay at all, depending on the device and OS version. This means your video background might not play for a large portion of your visitors.

There’s also a platform-specific limitation: YouTube background videos will not autoplay on mobile devices due to restrictions YouTube enforces outside of WordPress. Self-hosted MP4 files and Vimeo videos work on mobile, which makes them the better choice if mobile playback matters to you.

To handle this:

• Always mute the video. This is required for autoplay on mobile and is better for user experience anyway.
• Set a fallback image for every video background. This is a static image that displays when the video can’t load. In the Cover block, use the poster image option. In Elementor, set a Background Fallback. Inspiro Premium handles this automatically.
• Consider hiding the video on small screens and showing only the fallback image. You can do this with a CSS media query in Appearance > Customize > Additional CSS:

@media screen and (max-width: 768px) {
  video.wp-block-cover__video-background {
    display: none;
  }
}

Design Tips for Effective Video Backgrounds

• Use a color overlay to improve text readability. A dark overlay at 30-50% opacity works well with white text.
• Keep content minimal. A headline, short description, and one call-to-action button is enough. Don’t overload the video section.
• Match the video to your brand. The footage should complement your site’s purpose, not distract from it.
• Use subtle motion. Slow-panning landscapes, abstract textures, and soft focus clips loop better and feel less chaotic than fast-cut footage.

Accessibility Considerations

Some visitors experience motion sensitivity or have visual impairments. Keep these things in mind:

• Don’t rely on the video to convey essential information. Anything important should also appear as text.
• Make sure overlay text has sufficient contrast against the video. Use a contrast checker tool to verify.
• Respect reduced motion preferences. Users who set prefers-reduced-motion in their OS can be served the fallback image instead:

@media (prefers-reduced-motion: reduce) {
  video {
    display: none;
  }
}

---

Troubleshooting Common Video Background Issues

Video not playing on mobile: Mobile browsers require videos to be muted for autoplay. Make sure your video has no audio track, or that your theme, plugin, or page builder is set to mute by default. Also set a fallback image so mobile visitors still see something.

Video slowing down the site: Your file is probably too large. Compress the video to under 5MB, reduce the resolution to 720p, or switch to a YouTube/Vimeo embed. Check your page speed with Google PageSpeed Insights to confirm the improvement. For additional optimization tips, see our guide on how to eliminate render-blocking resources in WordPress.

Black screen instead of video: This usually means the video format isn’t supported. Convert to MP4 with H.264 codec. If you’re using a YouTube/Vimeo URL, make sure the link is correct and the video is set to public or unlisted (not private).

Video not looping: In the Cover block, videos loop by default. In Elementor, check that the Play Once toggle is off. In AWB, verify the loop setting in the block options.

Overlay hiding the video entirely: The overlay opacity is set too high. Go to the Styles tab (Cover block) or Background Overlay section (Elementor) and reduce the opacity. A value between 0.3 and 0.5 usually works well.

Video looks cropped or off-center: Use the focal point control (available in the Cover block and Elementor) to adjust which part of the video stays visible when the section resizes across different screen widths.

---

Video Background Examples in Action

Seeing real implementations helps. Here are two sites built with WPZOOM themes that use video backgrounds effectively:

#1. Paul Reiffer

Paul Reiffer is a photography website built with Inspiro Premium. The homepage features a fullscreen video background showcasing landscape photography in motion. The video uses subtle, slow-panning footage that loops cleanly, and the overlay is minimal: just a logo and a brief tagline. The result is a portfolio that feels cinematic without competing with the photographer’s actual work.

---

#2. Nomadikas

Nomadikas is a travel and lifestyle brand using the Inspiro PRO theme. The video background captures travel footage that immediately communicates the brand’s identity. A clean CTA button over the video guides visitors to explore further.

Both sites demonstrate the same principle: the video sets the mood, but the content on top drives the action.

---

---

Wrapping Up

Adding a video background to your WordPress site is straightforward once you pick the right method for your situation:

• Want a fully integrated solution? Use a theme like Inspiro Premium with its Video Slideshow widget for Elementor, multiple slides, YouTube/Vimeo/self-hosted support, lightbox playback, and full style controls out of the box.
• Need a quick, no-plugin option? The Cover block in the WordPress block editor works for self-hosted MP4 files with basic overlay and focal point controls.
• Want more control without changing themes? Install the Advanced WordPress Backgrounds plugin for YouTube/Vimeo support and parallax effects.
• Already using Elementor? Add video backgrounds directly through the section Style tab with start/end time controls and advanced overlay options.

Whichever method you choose, remember to compress your video, set a fallback image for mobile, and keep the content on top clean and readable. A video background should support your site, not slow it down.