How to add a background video using HTML5 and CSS

Based on a Dev Tips video I recently watched, “How To Make A Full Screen Video Background in HTML + CSS”, I managed to get the background video to work with an overlay of text, except the vertical and horizontal scroll bars were appearing in Firefox (version 43.0.4).

So for the purposes of this demo, I’ve added ‘overflow: hidden’ to the body tag in the CSS as the video (from Coverr) is quite large.

body {
overflow: hidden;

See the below HTML and CSS

Let me know how you would style a full-screen background video to your website’s homepage below.

View Demo.