Full Screen Background Video

Developer
GRAY GHOST
Size
7,221 Kb
Views
28,336
  1. Full Screen Background Video Previews
  2. Full Screen Background Video HTML Codes
  3. Full Screen Background Video CSS Codes
  4. Full Screen Background Video JS Codes

How do I make an full screen background video?

Experimenting with full screen background videos. Demo uses the following libraries to assist.... What is a full screen background video? How do you make a full screen background video? This script and codes were developed by GRAY GHOST on 24 November 2022, Thursday.

Full Screen Background Video Previews
IQ Test

Full Screen Background Video - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Full Screen Background Video</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://dfcb.github.io/BigVideo.js/bower_components/BigVideo/css/bigvideo.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! */ a { color: white; text-decoration: none;
}
a:hover { color: #DDD; text-decoration: underline;
}
button { color: black;
}
body { color: #EFEFEF;
}
nav ul { padding-left: 0; list-style-type: none;
}
nav li { display: inline-block;
}
.main { width: 90%; margin: 0 auto; z-index: 2; position: relative; transition-duration: 0.6s;
}
.opera,
.opera body,
.lt-ie9,
.lt-ie9 body { height: 100%;
}
html,
body { margin: 0; padding: 0;
}
html { background: #000;
}
.lt-ie9 body { background-size: cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/x-pink-floyd.jpg",sizingMethod="scale");
}
.overlay { position: absolute; width: 100%; height: 100%; z-index: 1;
}
.overlay--mesh { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/mesh.png); background-size: 4px 5px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="main"> <header role="banner"> <h1>Video ✭ Hero</h1> <nav role="navigation"> <ul> <li><a href="https://google.com">Features</a></li> <li><a href="https://google.com">Pricing</a></li> <li><a href="https://google.com">About</a></li> <li><a href="https://google.com">Blog</a></li> <li><a href="https://google.com">Contact</a></li> <li><a href="https://google.com">Sign in</a></li> <li><a href="https://google.com">Sign up</a></li> </ul> </nav> </header> <div> <!-- <img src="" alt=""> --> <h2>Videos Tell Powerful Stories</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto culpa possimus reiciendis praesentium ad accusamus ex at voluptate minima quas itaque reprehenderit rerum esse saepe iure corrupti perspiciatis nobis facere.</p> <button>Watch the Video</button> <button>Signup for Free</button> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js'></script>
<script src='http://vjs.zencdn.net/4.1/video.js'></script>
<script src='https://dfcb.github.io/BigVideo.js/bower_components/BigVideo/lib/bigvideo.js'></script>
<script src='js/a08e0d79c150ff5030f9b6afa.js'></script> <script src="js/index.js"></script>
</body>
</html>

Full Screen Background Video - Script Codes CSS Codes

a { color: white; text-decoration: none;
}
a:hover { color: #DDD; text-decoration: underline;
}
button { color: black;
}
body { color: #EFEFEF;
}
nav ul { padding-left: 0; list-style-type: none;
}
nav li { display: inline-block;
}
.main { width: 90%; margin: 0 auto; z-index: 2; position: relative; transition-duration: 0.6s;
}
.opera,
.opera body,
.lt-ie9,
.lt-ie9 body { height: 100%;
}
html,
body { margin: 0; padding: 0;
}
html { background: #000;
}
.lt-ie9 body { background-size: cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/x-pink-floyd.jpg",sizingMethod="scale");
}
.overlay { position: absolute; width: 100%; height: 100%; z-index: 1;
}
.overlay--mesh { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/mesh.png); background-size: 4px 5px;
}

Full Screen Background Video - Script Codes JS Codes

$(function() { // BV = new $.BigVideo({ useFlashForFirefox: false }); BV = new $.BigVideo({ useFlashForFirefox: false }); BV.init(); // Detect Opera // http://stackoverflow.com/questions/1998293/how-to-determine-the-opera-browser-using-javascript var Opera = (navigator.userAgent.match(/Opera|OPR\//) ? true : false); // Load This for Opera function operaVideoLoader() { //this browser is Opera $('html').addClass('opera'); videoFallbackStyles(); } // Fallback Styling w/No Video function videoFallbackStyles() { $('#big-video-vid').hide(); $('html').css({ 'background-color' : 'transparent' }); $('body').css({ 'background' : 'url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/x-pink-floyd.jpg) 100% 0 no-repeat', 'background-attachment' : 'fixed', 'background-size' : 'cover' }); } // Control Player function videoPlayer() { if ( $(window).width() <= 1024 && Modernizr.touch ) { videoFallbackStyles(); } else if(Opera) { operaVideoLoader(); } else { BV.show('//d3eak51ol1qdx0.cloudfront.net/videos/bg-default.mp4', { altSource: '//d3eak51ol1qdx0.cloudfront.net/videos/bg-default.ogv', ambient: true }); $('#big-video-wrap').prepend('<div class="overlay overlay--mesh"></div>'); } } videoPlayer(); $(window).resize(videoPlayer);
});
Full Screen Background Video - Script Codes
Full Screen Background Video - Script Codes
Home Page Home
Developer GRAY GHOST
Username grayghostvisuals
Uploaded November 24, 2022
Rating 4.5
Size 7,221 Kb
Views 28,336
Do you need developer help for Full Screen 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!

GRAY GHOST (grayghostvisuals) Script Codes
Name
Wave
Fixed Curtains
RWD Accordion
Rotating Cube
Dark Sky Weather App
Polyon Lion Enhanced
How to ChartJS
Polybird
Follow My Mouse
Off Canvas Overlay Full Screen
Create amazing Facebook ads 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!