Unlimited Websites Cpanel Hosting Only $0.99 per month - Click here
							<!DOCTYPE html>
<html lang="en">

  <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">



  <!-- 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">

    <!-- 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

  <section class="my-5">
    <div class="container">
      <div class="row">
        <div class="col-md-9 mx-auto">
            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 <code>background-color</code> of the <code>.overlay</code>
            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.
          <p class="mb-0">
            Created by <a href="https://getbuttercake.com">Start Butter Cake</a>

  <!-- STYLES -->
    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;

  <!-- 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>

Contact forms doesn't work yet, shoot a mail to contact@getbuttercake.com,
working really hard on it, feel free to show your love and support, Thank you