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.

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s