title: Inline video resize for mobile (jam3) to achieve object-fit: cover
body: <p>I'm trying to make <a href="https://github.com/Jam3/ios-video-test" rel="nofollow">https://github.com/Jam3/ios-video-test</a> work for my purposes.</p>
  
  <p>I want the video to scale and cover the whole viewport on mobile and desktop, something like an object-fit: cover or a height: 100% and width auto (for now it scales to fit the width)</p>
  
  <p>I changed this ...</p>
  
  <pre><code> resize()
    window.addEventListener('resize', resize, false)
    function resize () {
      var width = document.documentElement.clientWidth
      var height = document.documentElement.clientHeight
      letterbox(canvas, [
        width, height
      ], canvasVideo.video)
    }
  
    // resize and reposition canvas to form a letterbox view
    function letterbox (element, parent, video) {
      var aspect = video.videoWidth / video.videoHeight
      var pwidth = parent[0]
      var pheight = parent[1]
  
      var width = pwidth
      var height = Math.round(width / aspect)
      var y = Math.floor(pheight - height) / 2
  
      // this is a fix specifically for full-screen on iOS9
      // without it, the status bars will not hide... O.o
      if (canvasVideo.fallback) height += 1
  
      element.style.top = y + 'px'
      element.style.width = width + 'px'
      element.style.height = height + 'px'
    }
  </code></pre>
  
  <p>to hack this (Not gonna lie, I really know very little of what I'm doing) ...</p>
  
  <pre><code>   var width = Math.round(height / aspect)
     var height = pheight
     var y = Math.floor(pheight - height) / 2
  </code></pre>
  
  <p>and it only works to a certain extend (fine on mobile but it doesn't really cover the wide desktop viewports)</p>
  
  <p>Thanks so much for your help!</p>