<!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>Butter Cake v4.0.0</title>
<!-- FONT AWESOME 4.7.0 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- BUTTER CAKE CSS 4.0.0 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/buttercake@4.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://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 3.3.1 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- BUTTER CAKE JS 4.0.0 -->
<script src="https://cdn.jsdelivr.net/npm/buttercake@4.0.0/dist/js/butterCake.min.js"></script>
</body>
</html>