Shows a video fullscreen in the background of a page. Scales and centers video when you resize the window. Similar to bigvideo.js but much simpler.

backgroundVideo.js

$.fn.backgroundVideo = function() {
  var win = $(window)
  var wrap = this
  var vid = wrap.find('video')

  if (vid.length == 0) {
    throw new Error("You must call backgroundVideo on a wrapper div that contains a video element. No video element found.")
  }

  wrap.css({
    position: 'fixed',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    'z-index': -1,
    overflow: 'hidden',
  })

  win.resize(resize)
  resize()

  function resize() {
    var winAspect = win.width() / win.height()
    var vidAspect = vid.width() / vid.height()
    var scaleHeight = winAspect < vidAspect

    if (scaleHeight) {
      var newWidth = vidAspect * win.height()
      var leftover = newWidth - win.width()
      var margLeft = -1 * leftover / 2
      vid.css({
        width: newWidth,
        height: win.height(),
        'margin-top': '0',
        'margin-left': margLeft,
      })
    } else {
      var newHeight = vidAspect * win.width()
      var leftover = newHeight - win.height()
      var margTop = -1 * leftover / 2
      vid.css({
        width: win.width(),
        height: newHeight,
        'margin-top': margTop,
        'margin-left': '0',
      })
    }
  }
}