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:
- Option 1: Add the code manually
- Option 2: Use a video background plugin
- 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 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 a 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.
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 looks 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.
FAQs about WordPress video backgrounds
1. What is a WordPress video background?
You can set a video as the background of your website using the WordPress video background feature. This might be a video that plays in full-screen mode or one that hides behind your content.
2. How do I add a video background to my WordPress website?
Use a theme or plugin that supports this functionality to add a video background to your WordPress website. As an alternative, you can manually insert the movie using custom code onto your website.
3. Can I use any video file format for my WordPress video background?
WordPress is compatible with a number of video file types, including MP4, WebM, and Ogg. Before uploading your video to your website, you might need to convert it to one of these formats.
4. Do I need a special plugin to add a video background to my WordPress site?
No, not always. If your WordPress theme doesn’t already support video backdrops, you may add this functionality by using a plugin like WP Video Popup or Video Background.
5. Will adding a video background slow down my WordPress site?
It is doable. Large video files can prolong the time it takes for your website to launch. To avoid this, be sure to optimize the size and quality of your video clip and utilize a cache plugin to speed up your website.
6. How long should my WordPress video background be?
Your video background should be kept brief, ideally under 30 seconds. This will prevent website visitors from becoming disinterested or distracted while the video is playing.
7. Can I set my WordPress video background to autoplay?
You can, indeed. Your website might become more interesting and attract more attention if your video background automatically plays. Be warned, though, that some users could find autoplay videos irritating.
8. Will my WordPress video background play on all devices and browsers?
No, not always. Videos on some mobile devices may not play properly and some older browsers might not support HTML5 video. To ensure compatibility, test your video background across a range of platforms and browsers.
9. How can I optimize my WordPress video background for faster loading times?
You can reduce the size of the video file, pick an appropriate video codec, use a content delivery network (CDN), and enable caching to optimize your WordPress video backdrop.
10. Are there any SEO implications to using a WordPress video background on my website?
While a video background can enhance the visual appeal of your website, it’s crucial to make sure that it won’t have a detrimental effect on SEO. Make sure your video is formatted correctly, that its metadata is optimized, and that it is accompanied by pertinent information to prevent any unwanted effects.
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, slideshow image sliders, product carousels with navigation arrows, website sliders, and slider animation examples.
Thanks for post!