Background video

Developer
Moncho Varela
Size
3,286 Kb
Views
42,504
  1. Background video Previews
  2. Background video HTML Codes
  3. Background video CSS Codes
  4. Background video JS Codes

How do I make an background video?

Video http://www.movietools.info/. What is a background video? How do you make a background video? This script and codes were developed by Moncho Varela on 07 July 2022, Thursday.

Background video Previews
IQ Test

Background video - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Background video</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html, body { height: 100%; position: relative; margin:0; padding:0;
}
.box,.page { position:fixed; top:0; left:0; display: block; width: 100%; height: 100%; overflow: hidden; z-index:999; background:rgba(15, 102, 99, 0.5); color:white;
}
.is_overlay{ display: block; width: 100%; height: 110%;
}
.is_overlay video { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; background: url(https://dl.dropboxusercontent.com/u/23834858/videos/bck.jpg) no-repeat; background-size: cover;
}
.logo{	display:block; font-family: 'Changa One', cursive; text-align:center; margin:10% auto;
}
.logo_title{ font-size:5em; text-shadow: 0 3px 8px #000;
}
.logo_subtitle{ font-size:3em; text-shadow: 0 3px 8px #000;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <link href='http://fonts.googleapis.com/css?family=Changa+One' rel='stylesheet' type='text/css'>
<div class="box"> <div class="page">	<div class="logo">	<div class="logo_title"></div>	<div class="logo_subtitle"></div>	</div> </div> <div class="is_overlay"> <video autoplay loop poster="https://dl.dropboxusercontent.com/u/23834858/videos/bck.jpg" > <source src="https://dl.dropboxusercontent.com/u/23834858/videos/WD0221.mp4.mp4" type="video/mp4"> <source src="https://dl.dropboxusercontent.com/u/23834858/videos/WD0221.webmsd.webm" type="video/webm"> </video> </div> </div> <script src="js/index.js"></script>
</body>
</html>

Background video - Script Codes CSS Codes

html, body { height: 100%; position: relative; margin:0; padding:0;
}
.box,.page { position:fixed; top:0; left:0; display: block; width: 100%; height: 100%; overflow: hidden; z-index:999; background:rgba(15, 102, 99, 0.5); color:white;
}
.is_overlay{ display: block; width: 100%; height: 110%;
}
.is_overlay video { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; background: url(https://dl.dropboxusercontent.com/u/23834858/videos/bck.jpg) no-repeat; background-size: cover;
}
.logo{	display:block; font-family: 'Changa One', cursive; text-align:center; margin:10% auto;
}
.logo_title{ font-size:5em; text-shadow: 0 3px 8px #000;
}
.logo_subtitle{ font-size:3em; text-shadow: 0 3px 8px #000;
}

Background video - Script Codes JS Codes

/*global document,setTimeout,clearTimeout,setInterval,clearInterval */
var snippet = (function(){ 'use strict'; return{ ready:function(){ this.functions(); }, functions:function(){ var logo_title = this.selector('.logo_title'), logo_subtitle = this.selector('.logo_subtitle'); snippet.wait(function(){ snippet.anima(logo_title,'opacity',0,0,1,1000); logo_title.innerHTML = 'THIS'; },1000); snippet.wait(function(){ snippet.anima(logo_subtitle,'opacity',0,0,1,1000); logo_subtitle.innerHTML ='SUMMER'; },1500); snippet.wait(function(){ snippet.anima(logo_title,'opacity',0,0,1,1000); logo_title.innerHTML = 'WILD'; },3000); snippet.wait(function(){ snippet.anima(logo_subtitle,'opacity',0,0,1,1000); logo_subtitle.innerHTML ='FEAR'; },3500); snippet.wait(function(){ snippet.anima(logo_title,'opacity',0,0,1,1000); logo_title.innerHTML = 'IN'; logo_subtitle.innerHTML =''; },4500); snippet.wait(function(){ snippet.anima(logo_title,'opacity',0,0,1,1000); logo_title.innerHTML = 'DANGEROUS'; logo_subtitle.innerHTML =''; },7500); snippet.wait(function(){ snippet.anima(logo_subtitle,'opacity',0,0,1,1000); logo_subtitle.innerHTML ='WATERS'; },10000); snippet.wait(function(){ snippet.anima(logo_title,'opacity',0,0,1,1000); snippet.anima(logo_subtitle,'opacity',0,0,1,2000); logo_title.innerHTML = '24'; logo_subtitle.innerHTML ='JULY'; },15000); }, // this.selector('.foo'); selector:function(el){ return document.querySelector(el); }, /* * like delay * snippet.wait(callback(),time); */ wait:function(callback,time){ if(typeof setTimeout !== 'undefined'){ var t = setTimeout(function(){ clearTimeout(t); return callback(); },time); } }, /* * like animate * snippet.anima(elem,style,unit,from,to,time); */ anima:function(elem,style,unit,from,to,time) { if( !elem) return; var start = new Date().getTime(), timer = setInterval(function() { var step = Math.min(1,(new Date().getTime()-start)/time); elem.style[style] = (from+step*(to-from))+unit; if( step == 1) clearInterval(timer); },25); elem.style[style] = from+unit; } };
})();
snippet.ready();
Background video - Script Codes
Background video - Script Codes
Home Page Home
Developer Moncho Varela
Username nakome
Uploaded July 07, 2022
Rating 4.5
Size 3,286 Kb
Views 42,504
Do you need developer help for Background video?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Moncho Varela (nakome) Script Codes
Name
One page theme
Biru Css framework
Get color on click
Data uri converter
Responsive table with json data.
Calendar with json events mobile concept
Simply Redirect to
Css3 slide
Gallery with list style
Simple lightbox
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!