Vanilla JS Video Setup

index.html

<!-- Basic setup. Preload none will load vids faster. I've left the src blank so we can dynamically swap videos if needed, but if
you want just one video, just add the src here -->

<video id="player" autoplay loop preload="none">
  <source id="videomp4" src="" type="video/mp4">
  <source id="videowebm" src="" type="video/webm">
</video>

video.js

//get a reference to the player in the HTML
var player = document.getElementById('player');



//video object we are creating that has all the methods needed to do everything
var video = {
  
  //get references to each video format in the video tag in the HTML
  videomp4: document.getElementById('videomp4'),
  videowebm: document.getElementById('videowebm'),
  
  //used to make sure video fits full screen. can set to 4/3 if that's the aspect too of course
  ratio: 16/9,
  
  //simple flag that tells you whether the video is playing
  started: false,
  
  //function used to make sure the video fits full width
  resize: function(){
    //get a reference the the video object we just made above
    var self = this;
    
    var width = window.innerWidth;
    var height = window.innerHeight;
    
    //function to set the size of the video based on the ratio. pWidth is referenceing player width
    var pWidth = window.innerWidth;
    var pHeight = pWidth / self.ratio;
    
    //if there is a gap underneath (ie screen is portrait)
    if (width / ratio < height){
      pWidth = Math.ceil(height * ratio);
      
      player.style.position = 'fixed';
      player.style.width = pWidth + 'px';
      player.style.height = height + 'px';
      player.style.top = 0;
      player.style.left = (width - pWidth) / 2 +'px';
      //make sure it's in the back
      player.style.zIndex = 0;
    }
    
    //there is gap on the side
    else{
      pHeight = Math.ceil(width / ratio);
      
      player.style.position = 'fixed';
      player.style.width = width + 'px';
      player.style.height = pHeight + 'px';
      player.style.left = 0;
      player.style.top = (height - pHeight) / 2 + 'px';
      player.style.zIndex = 0;
    }
  },
  
  //function that will set up the video and load and play it
  init: function(){
    //get a reference again to the video object we created above
    var self = this;
    
    //resize the video immediately
    self.resize();
    
    //can skip this step if you've set src attribute in HTML
    self.videomp4.setAttribute('src', 'http://yourdomain.com/video.mp4');
    self.videowebm.setAttribute('src', 'http://yourdomain.com/video.webm');
    
    //load up player
    player.load();
    
    //listen for when the player is loaded, and play it
    player.onloadeddata = function(){
      player.play();
      self.started = true;
    }
    
    //listen for ended event, and start over in case loop isn't supported by browser
    
    //test to see if loop is supported
    if (typeof player.loop === 'boolean'){
      player.loop = true;
    }
    
    //if loop isn't supported
    else{
      player.addEventListener('ended', function(){
        // start video over when it's done and play it again
        this.currentTime = 0;
        this.play();
      }, false);
    }
  }
}


//listen for resize events in the browser, and run video resize function accordingly
window.addEventListener('resize', video.resize, false);


//call it
video.init();