Adding Fullscreen Background Video for the webpage using HTML, CSS & JavaScript
Introduction:
Hello coders, welcome to codewithrandom. Today we shall see the how to add background video in our webpage using HTML, CSS & 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:
<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 keep the video on autoplay. Let us look at the HTML Output. Before writing the CSS for Fullscreen Background Video.
HTML Output:
CSS Code:
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, added the bgcolor, font size & font family. Defined the width & height of the video container. So that everything should be arranged in systematically and nothing gets 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.
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.
CSS Output:
JavaScript Code:
'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:
Summary:
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
Post a Comment