Levi's GranFondo Parallax Video Background

parralaxVideo.html

<style>
  .parallaxVideo{
  opacity:0;
  z-index:10;
  min-width: 100%;
  min-height: 100%; 
  
  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
  width: auto !important;
  height: auto !important;
  
  /* Center the video */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.12/jquery.transit.min.js"></script>

<script>
jQuery(document).ready(function(){
    var is_iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
    var WindowWidth = jQuery(window).width();

        if(is_iOS){
            return; //Can't get videos to autoplay on iOS!
        }else if (WindowWidth < 800) {
            vidSource = "<source src='https://player.vimeo.com/external/174263057.sd.mp4?s=f351024c766f83c2a8992cb22dc8933ff016337b&profile_id=164' type='video/mp4'>";
        }else if (WindowWidth < 800) {
            vidSource = "<source src='https://player.vimeo.com/external/174263057.sd.mp4?s=f351024c766f83c2a8992cb22dc8933ff016337b&profile_id=164' type='video/mp4'>";
        } else if(WindowWidth < 1200) {
            vidSource = "<source src='https://player.vimeo.com/external/174263057.sd.mp4?s=f351024c766f83c2a8992cb22dc8933ff016337b&profile_id=165' type='video/mp4'>";
        } else {
            vidSource = "<source src='https://player.vimeo.com/external/174263057.hd.mp4?s=3ce8100d5a51ef27e3152530014ee342fbb3e4e0&profile_id=174' type='video/mp4'>";
        }

    //Grab first parallax window which contains the "featured image" for the page. But wait a bit so the page loads and sorts itself out.
    setTimeout(function(){
        jQuery(".article__parallax.article__parallax--img")
            .first()
            .prepend('<video autoplay="true" muted loop class="parallaxVideo">' + vidSource + '</video>')
            .find("video")
            .transition({ opacity: 1 }, 5000, "in");
    }, 2000);
});
</script>