by Raelene Morey on July 24, 2019

3 Ways to Add a Stunning WordPress Video Background to Your Site

WordPress Video Background

Video backgrounds are a hugely popular website design trend that undoubtedly bring any site to life. Most importantly, using a WordPress video background is a powerful way to stand out, engaging visitors and amplifying your message.

If you’ve been thinking about adding a video background to your WordPress site, this post is for you. We’ll look at how them to your site, along with tips on the best ways to use video.

Why Use a Video Background?

So why use WordPress video backgrounds for your website? Aside from the fact video backgrounds look really cool, they are engaging. Visitors will stop to watch your video background rather than just scroll past, whether it’s a hero video header, a landing page, or a fullwidth section on a page.

Another great thing about background videos is that they’re quick and easy for users to consume when you want to highlight an important aspect of your business. They’re also ideal for visual learners and very shareable, which is great when you’re looking to drive traffic to your site.

How to Add Video Backgrounds in WordPress

First things first: you need to source your video. You might already have some video footage you’ve uploaded to YouTube or Vimeo, or even to the media library of your WordPress website. Alternatively, you may want to download stock video from a site like Pixabay, Vimeo Stock, or Storyblocks.

Once you’ve got your video, there are a few simple options available to you for adding a WordPress background video to your site:

  • Use a video background plugin.
  • Use a theme that features easy video backgrounds.
  • Use a page builder.

Let’s look at these options in more detail!

WordPress Video Background Plugins

Plugins can help you add WordPress video backgrounds to your site, whether you want a hero header for your home page or a fullscreen video for a page. Most plugins give you options to use MP4 video (self-hosted on your WordPress site), YouTube and Vimeo.

Smart Slider 3

With Smart Slider 3, creating beautiful fullscreen video backgrounds is really simple. The plugin lets you create video blocks, which you can add to your site as a hero header or simply as a section on a page with a parallax scrolling effect.

Check out this stunning still from this example video block:

WordPress video background example

If you have your own video, you can upload it to your WordPress website as an MP4 and then insert it into your video block. Alternatively, simply enter the URL for your YouTube or Vimeo video.

You can add any number of layers to your video block, including text, buttons for video players, logos, thumbnails and, of course, your video background. In the settings there are options to add opacity, mute sound, and loop the video.

You can then insert your video into any page or post using the provided shortcode or by pasting a short snippet of PHP code directly into your site’s template file (don’t forget to use a child theme!).

Video Background

video background

Video Background is a simple, free plugin which allows you to add HTML5 video backgrounds to any element on your WordPress site. It’s pretty easy to use, just specify the CSS container you want to use (i.e. give it a name), link enter an URL for an MP4 or WebM file, and enter an URL for a fallback image.

If you want more advanced options, such as YouTube, page builder and playback features, you’ll need to upgrade to the pro version of the plugin, which starts at $19 for a single site license.

WordPress Video Background Themes

Video backgrounds have been a popular feature in WordPress themes, going back to the default Twenty Seventeen theme, which featured a fullscreen hero header video background. Two years on, the trend hasn’t slowed down, and most themes you’ll come across now will at least offer a hero video header.

There are many places to find good quality multipurpose WordPress themes with video backgrounds, but here are a few top picks:

There are also many independent theme shops that offer themes with video background. Before purchasing or downloading a theme, make sure to check with the theme author whether the theme includes a video background.

WordPress Video Background Page Builders

A page building plugin will give you drag and drop capabilities, allowing you to insert your WordPress background video anywhere you like on your website. This means you don’t have to know HTML or CSS to update your site’s design, and you don’t need to use a video background theme or plugin. While the Visual Composer plugin has been a popular page building options for many years now, the two most popular page builders are Elementor and Divi.

Elementor

Elementor lets you create video backgrounds using MP4 files and YouTube videos. There are further options for start and end times, fallback image, overlay, and blend modes. Smart Slider 3 is compatible with Elementor. To learn more, check out Smart Slider 3 and Elementor.

Divi

Divi is another popular page builder plugin that includes the ability to create video backgrounds. You can use self-hosted MP4 and WebM files, YouTube and Vimeo videos for your background. There are plenty of options for overlays, customizing the play button, and more.

Smart Slider 3 is compatible with Divi. Find out more in our guide, Give the Divi Slider an Upgrade with Smart Slider 3.

How to Create a WordPress Video Background with Smart Slider 3

With Smart Slider 3 you can easily add a video background to your slider with a few steps.

  1. Download and install Smart Slider 3 Pro
  2. Create a new slider
  3. Go to the Slide settings → Background tab
  4. Choose the video option and upload your video

video background

If you have the free version, you can create a video slider, but in this case you can’t use a self-hosted mp4 video, however you can create a Vimeo or YouTube slider.

Smart Slider 3 Icon
Bring Your Ideas to Life
Powerful. Visual. Intuitive. Smart Slider 3 is the most advanced slider and block creation tool for WordPress and Joomla.

Tips for Adding a Video Background to Your WordPress Site

Here are some tips to consider when creating a video background for your site:

  • Make sure your video is good quality and has a decent resolution.
  • Compress video for faster page loading.
  • Use videos that are short in length. Looping video ensures it runs smoothly without having to pause for buffering.
  • Ensure your video background has a fully responsive design so it looks great on all screens, including mobile devices.
  • Set a fallback image background for visitors whose browsers don’t support video.
  • Don’t autoplay with sound. Give visitors the option to enable sound.
  • Create an overlay for any text you want to place over the top, and ensure they’re enough contrast so it can be easily read.

Lights, Camera, Action with WordPress Video Backgrounds

When you want to create a fullscreen background video for your header or simply add a YouTube video background to a section of a page, WordPress video backgrounds are really easy to implement.

There are many WordPress plugins that can help you do it, but you can’t go wrong with Smart Slider 3. It’s simple to set up and features many options for adding overlays, text and other elements on top of your video. This is especially useful for hero headers!

Raelene Morey

About Author

Raelene Morey is the Chief Bird at Words By Birds , an agency that helps WordPress businesses make better content. Computer science grad turned newspaper journalist and ex-managing editor at WPMU DEV. Raelene has been developing WordPress sites for over 10 years.