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 in popularity. This trend is not surprising, considering the visual impact they have. A video background can make a WordPress site stand out from the crowd. It engages the visitor and magnifies the sites’ message.

It is not hard to enhance a WordPress site 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 plugin
  3. Option 3: Use a WordPress theme

The third way is the easiest and most recommendable. The SliderRevolution WordPress template results in a responsive video and allows playback.

1. HTML5, CSS and JavaScript

HTML5

CSS, HTML5, and JS are lightweight coding language. 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.

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. Plugins

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

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.

mb.YTPlayer for Background Videos

With this 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 see the video view count on Google Analytics.30

Slider Hero

Slider Hero allows you to build a customizable home page and landing page slider. This plugin contains more than 85 special animation effects for sliders. For the background videos, 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 & Video FullScreen Background 

This licensed plugin is very customizable. It adjusts the video resolution to the visitor’s device. Users can change the video parameters to the palette and dimension of the page. This can make the page design very sharp.

Video Player and Full-Screen Video Background

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

CountDown With Image or Video Background

This 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

A third way to add a background video 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 is SliderRevolution, which also has a modern-looking design.

The template is easy to install and customize. Users can create almost anything with this template, 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.

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 background video 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 site and will make any website more spectacular.

If you enjoyed reading this article about using a WordPress video background, you should read these as well:

How to Add a WordPress Video Background to Your Website

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 *