Basic Fullscreen Video Background
How do I make an basic fullscreen video background?
Nifty newish html5 in a simple format.. What is a basic fullscreen video background? How do you make a basic fullscreen video background? This script and codes were developed by Matt Gross on 28 August 2022, Sunday.
Basic Fullscreen Video Background - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Basic Fullscreen Video Background</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<!-- Content -->
<article> <h1>GROSS DESIGN co. <br /> <span>(Made by <a href="http://mattgross.io" target="_blank">Matt Gross</a>, for <a href="https://evenvision.com">EvenVision</a>)</span></h1>
</article>
<!-- Video is muted & autoplays, placed after major DOM elements for performance & has an image fallback -->
<video autoplay loop id="video-background" muted> <source src="https://player.vimeo.com/external/158148793.hd.mp4?s=8e8741dbee251d5c35a759718d4b0976fbf38b6f&profile_id=119&oauth2_token_id=57447761" type="video/mp4">
</video>
</body>
</html>
Basic Fullscreen Video Background - Script Codes CSS Codes
body { margin: 0; padding: 0;
/* Background fallback in case of IE8 & down, or in case video doens't load, such as with slower connections */ background: #333; background-attachment: fixed; background-size: cover;
}
/* The only rule that matters */
#video-background {
/* making the video fullscreen */ position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100;
}
/* These just style the content */
article {
/* just a fancy border */ position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 10px solid rgba(255, 255, 255, 0.5); margin: 10px;
}
h1 { position: absolute; top: 60%; width: 100%; font-size: 36px; letter-spacing: 3px; color: #fff; font-family: Oswald, sans-serif; text-align: center;
}
h1 span { font-family: sans-serif; letter-spacing: 0; font-weight: 300; font-size: 16px; line-height: 24px;
}
h1 span a { color: #fff;
}
Developer | Matt Gross |
Username | mattgrosswork |
Uploaded | August 28, 2022 |
Rating | 4.5 |
Size | 2,208 Kb |
Views | 54,648 |
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!
Name | Size |
EvenVision Branded Ajax Loader | 3,023 Kb |
Footnote concept | 3,056 Kb |
A Pen by Matt Gross | 12,421 Kb |
Basic Flexbox Reference | 1,662 Kb |
Super Basic Menu with Best Practices | 1,639 Kb |
Simple Skewed Image Container | 1,676 Kb |
Playing with transition timing | 1,993 Kb |
Basic Flexbox Layout | 1,729 Kb |
Scared Eyes | 1,673 Kb |
Fullscreen Video Background | 1,706 Kb |
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!
Name | Username | Size |
Save for later... | Victorfreire | 1,359 Kb |
Animate a paper plane along an SVG path, looking ahead | PotatoDie | 3,734 Kb |
Lazy Load for Background Images | The_ruther4d | 2,977 Kb |
Flex Table | Simeonoff | 4,059 Kb |
Sequence.js - Sliding Horizontal Parallax | Maheshc | 4,537 Kb |
Pure CSS Menu | Bronsrobin | 3,321 Kb |
RAQuote | Naderk007 | 4,412 Kb |
Scroll to top button | DominicFrancois | 3,743 Kb |
JQuery FullScreen Overlay | _codemics | 2,252 Kb |
Nested table email layout | Massimo-cassandro | 2,355 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!