VideoBg
How do I make an videobg?
What is a videobg? How do you make a videobg? This script and codes were developed by Elena on 17 December 2022, Saturday.
VideoBg - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>VideoBg</title> <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! */ video { max-width: 100%; width: 100%; vertical-align: middle; border: 0; display: block; margin: 0 auto;
}
#myVideo { /* position: absolute; */ left: 0; bottom: 0; top: 0; right: 0; width: 2000px; min-width: 720px; height: auto; min-height: 350px;
/* background: url(../images/video-bg.png) center no-repeat; */ -webkit-background-size: cover; background-size: cover; object-fit: cover; z-index: 3;
}
#section0 { position: relative; overflow: hidden; display: block;
}
@media only screen and (min-width: 770px) { #section0 { position: relative; overflow: hidden; max-height: 350px !important; min-height: 350px; height: 100% !important; display: block; }
}
#section0 .layer { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 4; width: 100%; height: 100%; background: rgba(0,0,0,.34); text-align: center;
}
.wrap_video { position: absolute; top: 50%; left: 0; right: 0; bottom: 0;
}
.site__title { display: block; line-height: .8; font-size: 48px; margin: 0; margin-bottom: 12px; color: #fff; font-family: serif;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <!-- Background video section : Start -->
<div class="custom-video section" data-section="about"> <div class="video_section" id="section0"> <video autoplay loop muted id="myVideo"> <source src="https://s3.amazonaws.com/distill-videos/videos/processed/9/MVI_0358.mp4.mp4" type="video/mp4"> <source src="https://s3.amazonaws.com/distill-videos/videos/processed/9/MVI_0358.mp4.webm" type="video/webm"> </video> <div class="layer"> <div class="wrap wrap_video"> <h1 class="site__title">Section Title </h1> </div> </div> </div> </div>
</div><!-- Background video section : End -->
</body>
</html>
VideoBg - Script Codes CSS Codes
video { max-width: 100%; width: 100%; vertical-align: middle; border: 0; display: block; margin: 0 auto;
}
#myVideo { /* position: absolute; */ left: 0; bottom: 0; top: 0; right: 0; width: 2000px; min-width: 720px; height: auto; min-height: 350px;
/* background: url(../images/video-bg.png) center no-repeat; */ -webkit-background-size: cover; background-size: cover; object-fit: cover; z-index: 3;
}
#section0 { position: relative; overflow: hidden; display: block;
}
@media only screen and (min-width: 770px) { #section0 { position: relative; overflow: hidden; max-height: 350px !important; min-height: 350px; height: 100% !important; display: block; }
}
#section0 .layer { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 4; width: 100%; height: 100%; background: rgba(0,0,0,.34); text-align: center;
}
.wrap_video { position: absolute; top: 50%; left: 0; right: 0; bottom: 0;
}
.site__title { display: block; line-height: .8; font-size: 48px; margin: 0; margin-bottom: 12px; color: #fff; font-family: serif;
}
Developer | Elena |
Username | semenchenko |
Uploaded | December 17, 2022 |
Rating | 3 |
Size | 2,592 Kb |
Views | 10,120 |
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 |
Calc.js | 4,200 Kb |
Business card mockup | 4,866 Kb |
SVG circle path | 2,031 Kb |
Walking skeleton only css | 9,064 Kb |
Modal | 9,533 Kb |
A Pen by Elena | 3,573 Kb |
Slider CSS Only | 8,018 Kb |
CSS Animation effect | 5,409 Kb |
SVG WORD Path | 3,461 Kb |
Pricing Table | 6,784 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 |
Css3 loader | Clknap | 2,391 Kb |
GsuiPopup | Mr21 | 2,641 Kb |
Week7 replicate | Hwcasis | 1,620 Kb |
Random Gradients - JS | Aldlevine | 2,026 Kb |
Bubble animation | Ftabor | 6,565 Kb |
Pure CSS Tooltips | Mobius1 | 2,271 Kb |
Ball Physics | Getsetbro | 3,149 Kb |
Expandable Left Side Bar with jQuery animate | Retrofuturistic | 2,483 Kb |
Comparison of Roboto Draft vs Roboto | Jxnblk | 2,880 Kb |
Lunar eclipse | Ademilter | 2,056 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!