WPservice DEVELOPMENT STUDIO PRESENTS
LONG-TERM GROWTH
We always design our websites with your future success in mind, carefully planning and optimizing all content to ensure maximum visibility and long-term profitability

How to Make a Video Background Website

How to make a video background website

Making a video background website begins with choosing a video for website background. There are several things to consider when selecting the video including:

  • Video format: If you want to be sure all bases are covered provide video in webm, ogg, and mp4 format.
  • Compression: Basically use as small a file as you can without sacrificing on quality. Always encode at a bitrate lower than your target user’s connection speed, since traffic and bandwidth can greatly reduce actual connection speed.
  • Responsive: By using the HTML5 <video> element video can be manipulated like any other page element so it is easy to make it responsive. The container can just scale as if it were an <img> tag.

Backgrounds for videos are readily available online from many sits. Prices vary but there are quite a few free options you can check.

Using HTML5, CSS and JavaScript to make your video background website

To add video background will involve using HTML, CSS, and JavaScript to detect whether or not to apply the video and then either apply the video as background or fall back to a static image. The process consists of the following steps:

  1. Create a container with an inner element containing several data attributes that the JavaScript will utilize:
<section id="big‐video">
<div class="video" data‐src="[FALLBACK IMAGE URL]" data‐video="[VIDEO URL]" data‐placeholder="[PLACEHOLDER IMAGE
URL]"></div>
</section

Basically this provides a static image to fall back on so that if a user’s browser or device won’t play the video they receive an image rather than an error message

  1. Test for device and browser requirements: If all requirements are met, the video element is added to the inner container. If the requirements are not met a div with a background image set is added. This can be accomplished using the following:
functionisIE () {
varmyNav = 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);
varimg = $('.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);
  1. Scale the video: When padding is set to a percentage, that percentage references the width of the element. Knowing the height/width ratio, allows us to set the height of the element to zero and the top or bottom padding to that ratio. The video scales proportionately if the video element is positioned to fill the entire container. Here is how you could write it:
#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%;
}

This video background website tutorial shows one way how to make a video background website but there are others such as by using a plugin. There are a number of different plugins and for those with less experience, using a plugin may be the best way how to make a video background website. Here is a list of some of the plugins for adding background video to a website:

how to make a video background website

Add video backgrounds to your website using a single JavaScript call. The script automatically picks the best video format has built-in image fallback for non-supportive mobile devices.

how to make a video background website

The same plugin as above but developed for WordPress

backgrounds for videos

This script will the pick the best quality of video to display in the background and also comes with a selection of control functions, such as pause, play, mute, and many more.

video for website background

This plugin is built on top of Video.js which is a popular HTML5 video library. Different video types can be added as a fallback as a fallback.

video background website tutorial

Background video is appended onto the page through a div with code written in jQuery.

These are just a few of the plugins that are the best way how to make a video background website for a novice.

Comments are closed.