With HTML5 Video and Butter Cake V3
The HTML5 video element uses an mp4 video as a source. Change the source video to add in your own background! The header text is vertically centered using flex utilities that are build into Butter Cake V3.
The overlay color can be changed by changing the background-color of the .overlay
class in the CSS.
Set the mobile fallback image in the CSS by changing the background image of the header element within the media query at the bottom of the CSS snippet.
Created by Start Butter Cake
Really Appreciate a like on Github
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hero header with video</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/buttercake@3.0.0/dist/css/butterCake.min.css">
</head>
<body>
<!-- HEADER -->
<header>
<!-- OVERLAY -->
<div class="overlay"></div>
<!-- VIDEO -->
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4">
</video>
<!-- CONTAINER -->
<div class="container flex-center-center text-center">
<div class="w-100 text-white">
<h1 class="display-3">Video Header</h1>
<p class="lead mb-0">With HTML5 Video and Butter Cake V3</p>
</div>
</div>
</header>
<!-- TEXT CONTAINER -->
<section class="my-5">
<div class="container">
<div class="row">
<div class="col-md-9 mx-auto">
<p>The HTML5 video element uses an mp4 video as a source. Change the source video to add in your own background!
The header text is vertically centered using flex utilities that are build into Butter Cake V3.</p>
<p>The overlay color can be changed by changing the <code>background-color</code> of the <code>.overlay</code>
class in the CSS.</p>
<p>Set the mobile fallback image in the CSS by changing the background image of the header element within the
media query at the bottom of the CSS snippet.</p>
<p class="mb-0">
Created by <a href="https://v3.getbuttercake.com">Start Butter Cake</a>
</p>
</div>
</div>
</div>
</section>
<!-- STYLES -->
<style>
header {
position: relative;
background-color: black;
height: 75vh;
min-height: 500px;
width: 100%;
overflow: hidden;
}
header video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 0;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
header .container {
position: relative;
z-index: 2;
height: 100%;
}
header .overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.5;
z-index: 1;
}
@media (pointer: coarse) and (hover: none) {
header {
background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
}
header video {
display: none;
}
}
</style>
<!-- jQuery first, then Butter Cake JS -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/buttercake@3.0.0/dist/js/butterCake.min.js"></script>
</body>
</html>