Adding background Video using HTML, CSS & JavaScript

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:

background Video using HTML, CSS & JavaScript
background Video using HTML Code Preview

 

 

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;  }
In this snippet, we have styled the body given width and the minimum required height and added the bg color, font size & font family. Defined the width & height of the video container. So that everything should be arranged systematically and nothing gets a mess.
.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;
}

In this snippet we now gave the padding, max width, font color, font family to our labels and heading which we defined in HTML code. And we have styled the anchor tag <a> in which we have linked an URL. Define the appropriate color, font size, position & border etc.

Portfolio Website using HTML and CSS (Source Code)

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);  
 }  
}  

In this final snippet we have gave the hover on the <a> which is defined in HTML Code. To give an effect on the button. And we set the padding for the button so that everything is arranged systematically.

Let us see the CSS Output before writing the JavaScript for Fullscreen Background Video.

Html and Css Code Output:

Adding background Video using HTML, CSS & JavaScript
Adding background Video using HTML, CSS & JavaScript

 

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);
}
In the JavaScript code we have given variable as var for each and every HTML tag so that they can be called in the further code. Then we positioned the video in the centered and made it to look into fullscreen. Let us see the Output of Fullscreen Video.

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

Summary Adding background Video using HTML, CSS & JavaScript:
We have created the adding of the fullscreen background video with the help of HTML, CSS & JavaScript. We have defined the labels and heading in the HTML code then we have styled the defined tags in the CSS code and called them as variable(var) in JavaScript Code.
And pass on a statement as IF for the working of video. If you loved it do comment it boosts our motivation to bring new projects. If you face any difficulty while performing you can reach out us with the help of comment section.
Happy Coding
Written by @Harsh_9

Leave a Reply