Fullscreen Vimeo background

theme-styles.css

.video { 
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transition: 1s opacity;
}

video-snippet.js

<!-- Set START TIME in iframe url params. Set stop time in onPlayProgress()  -->
<iframe id="vimeo_player" src="//player.vimeo.com/video/121528721?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=1&amp;loop=0&amp;player_id=vimeo_player#t=1m18s" width="100%" height="100%" class="video hide-on-mobile" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
<script src="//f.vimeocdn.com/js/froogaloop2.min.js"></script>

<script type="text/javascript">
  var player = $f(document.getElementById('vimeo_player'));
  player.addEvent('ready', function() {
    player.api('setVolume', 0);
    player.addEvent('playProgress', onPlayProgress);
  });
  
  function onPlayProgress(data, id) {
    if (data.seconds > 110) {
      player.api('pause', true);
    }
  }
</script>