How to Add a WordPress Video Background to Your Website

A large image on the homepage of a website looks impressive. It can transform the appearance of a site. But the effect of such an image is limited. It changes the look and draws the attention of the visitor for a moment, but that is all. To maintain viewers’ attention other tricks are necessary.

A large image on the homepage of a website looks impressive. It can transform the appearance of a site. But the effect of such an image is limited. It changes the look and draws the attention of the visitor for a moment, but that is all. To maintain viewers’ attention other tricks are necessary. For example, the use of a video background.

Recently, video backgrounds have gained popularity. This trend is not surprising, considering the visual impact they have. A video background can make a WordPress website stand out from the crowd. It engages the visitor and magnifies the sites’ message.

It is not hard to enhance a WordPress website with a video background. This article will show how easy it is. With these tips anyone can do it, fast and simple.

Why Use Video Background?

The first few seconds of an introduction are crucial. That is a reality in face-to-face contact and in the virtual world. So when a visitor visits a website for the first time, it is critical to catch their attention. A good first impression is key.

Video backgrounds look cool, but their most important function is to engage the guest. They will likely stop and look at a video. No matter what kind of video the site uses, it will capture the viewer’s attention.

Another advantage is that videos are a great medium. It is much easier and quicker to convey a message visually. Visual learners particularly will notice and appreciate this highlight. Also, videos are easy to share and can serve to increase a website’s exposure.

How to Add Video Backgrounds in WordPress

There are three basic ways to add a video background to a website:

  1. Option 1: Add the code manually
  2. Option 2: Use a video background plugin
  3. Option 3: Use a template or a theme

The third way is the easiest and most recommendable. The Slider Revolution templates are easy to set up and to customize.

1. HTML5, CSS and JavaScript

HTML5

CSS, HTML5, and JS are lightweight coding languages if used properly. This, on top of their responsiveness and flexibility, make them pleasant to work with. The code can be tested in different browsers. In case the video background is not supported in a browser, an alternative image can be displayed.

There are WordPress themes that support video backgrounds natively, but in case you find a WordPress theme that doesn’t do that, you can add the code yourself.

This is what the code could look like:

Markup

To start with, a container for the JavaScript is built:

<section id="big-video">
<div class="video" data-src="[FALLBACK IMAGE URL]" data-video="[VIDEO URL]" data-placeholder="[PLACEHOLDER IMAGE URL]"></div>
</section>
Scripts

The next code is to test for browsers:

function isIE () {
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
}

window.isIEOld = isIE() && isIE() < 9;
window.isiPad = navigator.userAgent.match(/iPad/i);

var img = $('.video').data('placeholder'),
    video = $('.video').data('video'),
    noVideo = $('.video').data('src'),
    el = '';


if($(window).width() > 599 && !isIEOld && !isiPad) {
    el +=   '<video autoplay loop poster="' + img + '">';
    el +=       '<source src="' + video + '" type="video/mp4">';
    el +=   '</video>';
} else {
    el = '<div class="video-element" style="background-image: url(' + noVideo + ')"></div>';
}


$('.video').prepend(el);

When all requirements for the video are met, the video will be loaded. The alternative image will be used if the conditions are not met. The code also tests for screen resolution and device type (for example, iPad). Other tests can be included as well.

CSS

It’s also possible to use CSS to style the markup. In CSS, the size of the container is set, rather than scaled from the <img> or <video> tag. During loading, the page is outlined first before loading the elements. This maintains the aspect ratio.

	#big-video {
	    position: relative;
	    background: #000;
	    overflow: hidden;
	    height: 582px;
	}
	

	#big-video .video {
	    z-index: 1;
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 0;
	    padding-bottom: 56.25%;
	}
	

	#big-video video {
	    position: absolute;
	    width: 100%;
	    height: 100%;
	    top: 0;
	    left: 0;
	}
	

	#big-video .video-element {
	    position: absolute;
	    width: 100%;
	    height: 100%;
	    top: 0;
	    left: 0;
	    background-position: 50% 50%;
	    background-repeat: no-repeat;
	    background-size: auto 100%;
	}

2. WordPress Video Background Plugins

Building a page using code is time-consuming and requires know-how and skill. If time is limited, or coding skills are lacking, video background plugins are an alternative. Below are five examples of video background plugins that you can use in WordPress.

Slider Revolution

You’ve got a royalty-free media library at your fingertips all included in this WordPress slider plugin with video background option.

Background images and videos can be easily added to any page where you use Slider Revolution.

Just point & click to turn any cookie-cutter element on your page into a visual force with great aesthetics AND excellent functionality.

You can use Slider Revolution with most if not all WordPress themes out there. With a little luck, your WordPress theme already has the basic version of Slider Revolution.

mb.YTPlayer for Background Videos

With this WordPress video background plugin, it is simple and fast to set a YouTube video as a background. This can apply to any part of the page, even posts.

There is also a Plus version available. This allows users to choose the start point of the video, control the volume, and a few more.

Slider Hero

Slider Hero allows you to build a customizable home page and landing page slider. This WordPress video background plugin contains more than 85 special animation effects for sliders.

For a video background, the use of YouTube and Vimeo videos is possible. There is also an option to add text to the video. Slider Hero can assist with sharing the site’s message in an engaging way.

Image & FullScreen Video Background 

This WordPress video background plugin is very customizable. It adjusts the video resolution to the visitor’s device so that the visitor gets a fullscreen video background. Users can change the video parameters to the palette and dimension of the page. This can make the page design very sharp.

Design visually attractive and high-performing websites without writing a line of code

WoW your clients by creating innovative and response-boosting websites
fast with no coding experience. Slider Revolution makes it possible for you
to have a rush of clients coming to you for trendy website designs.

Video Player and FullScreen Video Background

This plugin is HTML5-based and can add a fullscreen video background to a WordPress website. It can use videos from various video hosting sites, such as YouTube and Vimeo.

CountDown With Image or Video Background

This fullscreen video background plugin is suitable for marketing purposes. It has a feature that allows the user to place a banner over the video. This can highlight a certain product or service on the page. It can also add a countdown timer to encourage visitors to start buying.

3. WordPress Templates or WordPress Themes

A third way to add a video background is to use a WordPress template. Many paid templates are available that come with a video background feature. It only asks the user to add the video URL. A recommended template source is the SliderRevolution plugin that we have, which also has a modern-looking design.

The templates are easy to install and customize. Users can create almost anything with our templates, without any coding knowledge.

Slider Revolution includes templates, assets, and a royalty-free media library. For extra visual impact and dynamic content, the add-on library has much to offer and should satisfy your video background WordPress needs.

Here are three examples that show what a Slider Revolution based website can look like:

Rockable Website Template

Minimal Portfolio Website

GoodNews Template Website

Some Tips

A video background gives a completely different feel and look to a website. It can also provide a different impression to the visitor. These are some additional tips that make a video even more impactful:

  • Use a high-quality video.
  • Compress the video to increase load speed.
  • Use a placeholder. Have an alternative image, just in case.
  • Use a video that is one minute max.
  • Sound does not add much value and only increases the file size. Give the users the option of turning on the sound.
  • For mobile applications, it is best to replace the video with an image.

It is always best to keep things simple. Start with the basics and add more complex elements only if it adds something to the site. A background video should emphasize the message, make it more attractive, and fit in with the rest of the site’s content and design. A background video should blend in, not overpower everything else.

Ending thoughts on using a WordPress video background

There are three different ways to add a video background to a website, as discussed above. The fastest and easiest way is to use the Slider Revolution WordPress theme. The use of plugins was also mentioned.

A video background will increase the number of visitors to a website. It makes a site stand out from the rest and helps to catch and maintain the attention of the viewers. It is easy to add a video to a WordPress website and will make any website more spectacular.

If you enjoyed reading this article about adding a video background in WordPress, you should check out this article on how to add a slider in WordPress.

We also wrote about similar topics like using a hero slider, a video slider, a homepage slider (see the pattern here?). But also about the Ken Burns effect that we use in some of our slider templates, as well as WordPress themes with sliders included, the particle effect, website sliders, and slider animation examples.

How to Add a WordPress Video Background to Your Website

FREE: Your Go-To Guide For Creating
Awe-Inspiring Websites

Get a complete grip on all aspects of web designing to build high-converting and creativity-oozing websites. Access our list of high-quality articles and elevate your skills.

The Author

SR Staff

We're a passionate bunch of designers and developers writing about the ins and outs of web design.

Liked this Post?
Please Share it!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.