Responsive Background Video In HTML CSS

Once upon a time, a student decided the best way is to create a video background is to copy snippets on the Internet. While the project worked in the end, Master Coffee cannot help but shake his head at the “Frankenstein code”. It’s actually fairly easy to do video background in modern HMTL CSS, let Master Coffee show you how. Let’s go.

 

CODE DOWNLOAD

ZIP File

I have released this under the MIT license, feel free to use it in your own project – Personal or commercial. Some form of credits will be nice though. 🙂

 

 

VIDEO TUTORIAL

 

1) THE HTML

1-vid-bg.html
<div id="vwrap">
  <div id="vfront">Coffee</div>
  <video id="vback" src="demo.mp4" poster="demo.webp" autoplay muted loop></video>
</div>
  • Start with a <div id="vwrap"> wrapper.
  • Put a <div id="vfront"> container inside for the content.
  • Lastly, also put the <video id="vback"> inside. Take note, for autoplay to work on page load, the video must be muted.

 

 

2) THE CSS

2-vid-bg.css
/* (PART A) WRAPPER */
#vwrap {
  width: 100%; height: 300px;
  max-width: 600px; margin: 0 auto;
}

/* (PART B) LAYER FRONT & BACK */
#vwrap { position: relative; }
#vfront, #vback {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
}
#vfront { z-index: 2; }
#vback { z-index: 1; }

/* (PART C) RESIZE VIDEO */
#vback { object-fit: cover; }

There is no such thing as “CSS background video” at the time of writing, so what we do here is to “stack” the content foreground on top of the video background.

  • Start by setting the required dimensions of the wrapper – #vwrap { width height }
  • To layer the foreground and background:
    • Set the wrapper to position: relative.
    • Set both foreground and background to position: absolute, and cover the wrapper with width: 100% height: 100%.
    • Place the foreground on top with z-index: 2 and background with z-index: 1.
  • Finally, set how the video resizes – with object-fit: cover. You can also try contain or none.

 

 

3) VIDEO AUTOPLAY

3-vid-bg.js
window.addEventListener("load", () => {
  if (document.getElementById("vback").paused) {
    let vbgplay = () => {
      document.getElementById("vback").play();
      document.removeEventListener("click", vbgplay);
    };
    document.addEventListener("click", vbgplay);
  }
});

That’s all. The above HTML and CSS will work well enough, but there is a possible problem – The video autoplay may not work on all devices, depending various factors such as connection speed and security settings. There are 2 possible ways to “fix” this:

  • As above, define a poster on the video. Show an image instead of the video.
  • Use a small Javascript snippet to “force start” the video after the first click. Yes, this is a common “problem” on most browsers. Videos cannot start playing until the user clicks on the page at least once.

P.S. This may not be an elegant or foolproof solution, but at least there’s something.

 

 

THE END – FULLSCREEN BACKGROUND VIDEO

That’s all for this short tutorial and sharing. Just one small bit before we end, for those who wants a full page background video:

  • Just insert <div id="vfront"> and <video id="vback"> directly into <body>… The body is now your #vwrap.
  • Remove the padding and margin on the page itself – html, body { padding: 0; margin: 0; }
  • Set the page to fill the entire window – html, body { width: 100vw; min-height: 100vh; }
  • That’s all. The rest are of the “layering” are the same.

 

CHEAT SHEET

Responsive Background Video In HTML CSS (click to enlarge)