Background Video

I needed to create a self-playing video in the background of a header at a client recently. I couldn’t find a decent library to do it the way I needed to do it. Although there are a lot of great libraries out there to do part of what I wanted to do, I couldn’t find one that had all of these features:

  • autoplay
  • run in the background
  • transparency overlay
  • overlay text
  • loop
  • no black bars
  • responsiveness
  • self-sizing
  • background image fallback

So I wrote one and popped it on GitHub (with an MIT license). It’s right here:

If you’d like to see it in action, you can check out this page:

You will want to use the index.html file to discover examples of how to integrate the background-video.css and the background-video.js with your page requirements.