<div class="fullscreen-bg">
  <video loop muted autoplay poster="https://storage.coverr.co/t/Yh1kERqtFxxfzaX2Zb02UqoUAJ7zkQ02tA" class="fullscreen-bg__video"> 
    <source src="https://storage.coverr.co/videos/Yh1kERqtFxxfzaX2Zb02UqoUAJ7zkQ02tA?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6Ijg3NjdFMzIzRjlGQzEzN0E4QTAyIiwiaWF0IjoxNjE2MzA4MjMwfQ.jzxOtJq3VYt_sT6ElwUfOaYsBsRl8LiCqajORF4PzzE" type="video/mp4"> 
    <!-- add .ogv and .webm to cover all compatible devices  -->
  </video>
</div>
<div class="content">
  <h1 class="content__title">Fullscreen HTML5 Video Background</h1>
  <p class="content__text">Here is a  full screen html5 Video Background with simple steps </p>
</div>

<footer class="footer">
  <p class="footer__text">Video sample from <a  class="footer__link" href="https://coverr.co/" target="_blank">coverr</a><p>
</footer>
//import font from google
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);

// variables
$gray-base: #000;
$font-regular: "Roboto", sans-serif;

// mixins
@mixin translate($x, $y) {
  -webkit-transform: translate($x, $y);
  -ms-transform: translate($x, $y); // IE9 only
  -o-transform: translate($x, $y);
  transform: translate($x, $y);
}

@mixin background-size($size) {
  -webkit-background-size: $size;
  -moz-background-size: $size;
  -o-background-size: $size;
  background-size: $size;
}
body {
  margin: 0;
  padding: 0;
  font-family: $font-regular;
  background: $gray-base;
}

.fullscreen-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -100;
  &__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  &::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba($gray-base, 0.5);
    z-index: 1;
  }
}

.content {
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 999;
  text-align: center;
  @include translate(-50%, -50%);
  &__title {
    font-size: 48px;
    color: white;
    padding: 0 10px;
    text-shadow: 2px 2px 0px #000;
    margin: auto;
  }
  &__text {
    font: 300 18px $font-regular;
    color: white;
    display: block;
  }
}

@media (min-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    height: 300%;
    top: -100%;
  }
}

@media (max-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    width: 300%;
    left: -100%;
  }
}

@media (max-width: 767px) {
  .fullscreen-bg {
    background: url("https://storage.coverr.co/t/Yh1kERqtFxxfzaX2Zb02UqoUAJ7zkQ02tA")
      center center / cover no-repeat;
    @include background-size(cover);
    &__video {
      display: none;
    }
  }

}

.footer {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 10px;
  margin: 15px;
  opacity: 0.6;
  &__text {
    margin: 0;
    color: #fff;
  }
  &__link {
    color: #fff;
  }
}

 
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.