Adding background Video using HTML, CSS & JavaScript

Hello coders, welcome to codewithrandom. Today we shall see How To add Background Video Using HTML, CSS and JavaScript. Videos are the very effective way to show someone about your product or business. It also reduces the vast content on the website and give user the proper information regarding the product or business.

We as coder have done this on a basic level just coding HTML file defining the tag of <video src> and then setting the frame by width and height. But now when we look at this project from the end of Front-End Developer. We have to use External CSS and JavaScript to boost our knowledge from basic to advance. Let us see the creating of this project.

Html Code For Background Video

 <div id="video-container">
<video preload="auto" autoplay loop muted width="1440" height="810">
<source src="https://vectorform.com/wp-content/themes/vectorform/videos/about.mp4" type="video/mp4">
<source src="https://vectorform.com/wp-content/themes/vectorform/videos/about.webm" type="video/webm">
<source src="https://vectorform.com/wp-content/themes/vectorform/videos/about.ogv" type="video/ogv">
</video>
</div>
<div class="overlay">
<div class="overlay__inner">
<h2>Fullscreen HTML5 Background Video</h2>
<p>
Utilizes Javascript to create cover effect and updates on resize. Modernizer determines an image fallback for touch devices.
</p>
</div>
</div>

In this code, we have linked our video and set the frame for it. Then given a heading in an overlay class. We have kept the video on autoplay. Let us look at the HTML Output. Before writing the CSS for Fullscreen Background Video.

50+ Html ,Css & Javascript Projects With Source Code

Only HTML Code Output:

 

Css Code For Background Video

html, body {  
 overflow-x: hidden;  
 width: 100%;  
 min-height: 100%;  
}  
body {  
 background: #1d1f20;  
 color: #aaa;  
 font-size: 18px;  
 line-height: 1.4;  
 font-family: 'Inconsolata', sans-serif;  
}  
* {  
 box-sizing: border-box;  
}  
#video-container {  
     position: absolute;  
     top: 0;  
     left: 0;  
 right: 0;  
 bottom: 0;  
     width: 100%;  
     height: 100%;  
     z-index: 10;  
     overflow: hidden;  }

.touch & {
background: url(http://xtianmiller.com/dist/videos/winter_creek.jpg) no-repeat center;
background-size: cover;
}
}
video {
width: 100%;
height: 100%;
.touch & {
display: none;
}
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 20;
background-color: rgba(0,0,0,0.7);
padding-left: 6%;
padding-right: 6%;
display: table;
&__inner {
width: 100%;
height: auto;
display: table-cell;
vertical-align: middle;
text-align: center;
}
h2 {
max-width: 40em;
font-size: 28px;
font-weight: 700;
color: #fff;
font-family: 'Raleway', sans-serif;
line-height: 1.3;
margin: 0 auto;
}
p {
padding-top: 1em;
max-width: 40em;
margin: 0 auto;
}
a.btn {
display: inline-block;
margin-top: 25px;
border: 1px solid #00c1bb;
color: #00c1bb;
text-decoration: none;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
position: relative;
overflow: hidden;
}

a.btn span {  
  display: inline-block;  
  padding: 6px 40px;  
  transition: transform 0.4s;  
 }  
 a.btn .row2 {  
  position: absolute;  
  left: 0;  
  top: 0;  
  transform: translateY(100%);  
 }  
 a.btn:hover .row1 {  
  transform: translateY(-100%);  
 }  
 a.btn:hover .row2 {  
  transform: translateY(0);  
 }  
}  

Html and Css Code Output:

JavaScript Code For Background Video

'use strict';
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this,
args = arguments;
var later = function() {
timeout = null;
if (!immediate) {
func.apply(context, args);
}
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) {
func.apply(context, args);
}
};
}
var htmlTag = document.getElementsByTagName('html')[0];
var videoContainer = document.querySelector('#video-container');
var videoElem = document.querySelector('#video-container video');
var minW = 320; // Minimum video width allowed
var vidWOrig; // Original video dimensions
var vidHOrig;
vidWOrig = videoElem.getAttribute('width');
vidHOrig = videoElem.getAttribute('height');
var videoCover = function() {
var winWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var winHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
videoContainer.style.width = winWidth + 'px';
videoContainer.style.height = winHeight + 'px';
// Use largest scale factor of horizontal/vertical
var scaleH = winWidth / vidWOrig;
var scaleV = winHeight / vidHOrig;
var scale = scaleH > scaleV ? scaleH : scaleV;
if (scale * vidWOrig < minW) {
scale = minW / vidWOrig;
}
var videoNewWidth = scale * vidWOrig;
var videoNewHeight = scale * vidHOrig;
videoElem.style.width = videoNewWidth + 'px';
videoElem.style.height = videoNewHeight + 'px';
videoContainer.scrollLeft = (videoNewWidth - winWidth) / 2;
videoContainer.scrollTop = (videoNewHeight - winHeight) / 2;
};
if (htmlTag.classList.contains('no-touch')) {
videoCover();
var updateVideo = debounce(function() {
videoCover();
}, 100);
window.addEventListener('resize', updateVideo);
}

Final Output Of Adding background Video using HTML, CSS & JavaScript: