Video banner responsive

index.html

<div class="banner with-video" style="background-image: url({{root}}images/banner.jpg)">
      <div class="video-viewport">
        <video width="1920" height="1080" autoplay muted loop>
          <source src="http://www.coverr.co/s3/mp4/Winter-Grass.mp4" type="video/mp4" />
          <source src="http://www.coverr.co/s3/mp4/Winter-Grass.webm" type="video/webm" />
        </video>
      </div>
      <!-- /.video -->
      <div class="overlay"></div>
      <div class="inner">
        <h1 class="banner-title">Working together</h1>
        <h2 class="banner-subtitle">Anytime. Anyplace. Any Mode.</h2>
        <h2 class="color-subtitle">CO<strong>LLABORATIVE LO</strong>GISTICS</h2>
        <div class="btns">
          <a href="#" class="banner-btn red">Get a Quote</a>
          <a href="#" class="banner-btn border">Learn More</a>
        </div>
        <a href="#section-2" class="next"></a>
      </div>
    </div>

init.js

//banner video
  $(window).resize(function () {
    fitVideo();
  });

  $(window).load(function() {
    $(window).trigger('resize');
  });

  function fitVideo() {
    var originalWidth = $('.with-video video').attr('width');
    var originalHeight = $('.with-video video').attr('height');
    var originalAspectRatio = originalWidth / originalHeight;

    var currentWidth = $('.with-video').outerWidth();
    var currentHeight = $('.with-video').outerHeight();
    var currentAspectRatio = currentWidth / currentHeight;

    if(originalAspectRatio >= currentAspectRatio) {
      $('.video-viewport').addClass('width');
    } else {
      $('.video-viewport').removeClass('width');
    }
  };

style.pcss

&.with-video {
    height: 100%;
    overflow: hidden;
    background: none !important;
  }

  .video-viewport {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;

    &.width {
      video {
        width: auto;
        height: 100%;
      }
    }
  }

  video {
    display: block;
    height: auto;
    width: 100%;
    left: 50%;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }