Video Background Hero

Responsive video background hero with overlay

by Glynne Turner

HTML

<div class="parrallax-holder">
  <div class="video-background parrallax">
    <div class="video-foreground">
      <iframe src="https://www.youtube.com/embed/Xxy-ZY7Pwqw?autoplay=1&autohide=2&mute=1&border=0&wmode=opaque&enablejsapi=1&modestbranding=1&controls=2&loop=1&showinfo=1" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
</div>
<div class="container">

  <div class="content hero animate moveUp  slowly">
    <h1>Header 12</h1>
    <h2>Header 2</h2>
    <h3>Header 3</h3>
    <h4>Header 4</h4>

  </div>
  <div class="content animate bounceInLeft animationDelayLong slowly white">OTHER TEXT HERE
  </div>
</div>

<section style="background:green; text-align:center; padding:50px; overflow:hidden">
  <div class="animate  fadeInUp animationDelayLong slowly white">
    <p class="bold">OVER <span class="bluetext">40 years</span> experience</p>

    Helping to make your move enjoyable <br /> Call us now: <br />
    <a href="tel:07741 471840" class="bluetext">07741 471840</a> <br />




  </div>
  <div class="link animate moveUp  slowly animationDelayLong">
    <a href="prices">Prices</a>
  </div>
  <div class="half">


  </div>
</section>

CSS

.container {

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  width: calc(100vw - 17px);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.content {
  position: relative;
  padding: 10px;
}

.container::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: hsl(11, 100%, 33%);
  mix-blend-mode: multiply;
}



.video-background {
  background: #000;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

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

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


@media (max-width:720px){
  .video-background{display:none;}
  .parrallax-holder{background: url('https://canarytrailevents.com/wp-content/uploads/2020/07/header-image-Andy-Milton-1568x1047.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
  position: absolute;}
  
}



.animate {
  visibility: hidden;
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}

/* show objects being animated */
.animated {
  visibility: visible;

  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;


  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -ms-animation-play-state: running;
  -o-animation-play-state: running;
  animation-play-state: running;
}

.slowly {
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 15s;
 ...

JavaScript

jQuery(function($) {

  // Function which adds the 'animated' class to any '.animatable' in view
  var doAnimations = function() {

    // Calc current offset and get all animatables
    var offset = $(window).scrollTop() + $(window).height(),
      $animatables = $('.animate');

    // Unbind scroll handler if we have no animatables


    // Check all animatables and animate them if necessary
    $animatables.each(function(i) {
      var $animatable = $(this);
      if (($animatable.offset().top + $animatable.height() - 50) < offset) {
        $animatable.removeClass('animate').addClass('animated');
      }
    });

  };

  // Hook doAnimations on scroll, and trigger a scroll
  $(window).on('scroll', doAnimations);
  $(window).trigger('scroll');
  $(document).ready(function() {
    // we call the function 
    doAnimations();
  });




});