JSFiddle - React, Tailwind, and code Playground

by akash_payne

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css">
<header id="header-banner">

  <div id="header-carousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="10000">
    <ol class="carousel-indicators">
      <li data-target="#header-carousel" data-slide-to="0" class="active"></li>
      <li data-target="#header-carousel" data-slide-to="1"></li>
      <li data-target="#header-carousel" data-slide-to="2"></li>
    </ol>

    <div class="carousel-inner carousel-inner-pcustom">
      <!-- inner content -->
      <div class="carousel-item active carousel-padding-header">
        <div class="overlay"></div>
        <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>
        <div class="container h-100 custom-p-10">
          <div class="d-flex text-center h-100">
            <div style="height:100vh; width:100vw;">

              <div class="container h-100 custom-p-10">
                <div class="d-flex text-center h-100">
                  <div class="my-auto w-50 text-white">
                    <h3 class="display-3">Under Maintenance</h3>
                    <h5>Unfortunately the site is down for a...

CSS

header {
  position: relative;
  background-color: white;
  height: 100%;
  min-height: 100%;
  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;
}

header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 125%;
  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;
  }
}