Full-Screen Video Background

Below is a demo of a full-screen video background using only CSS and HTML – no JavaScript required.

See the Pen Full-Screen Video Background by Alex Dobson (@SufferMyJoy) on CodePen.

The key to this demo is to use the HTML <video> element with a normal image to use as a fallback as both the poster attribute and in your CSS as the background. If you do this you will be covered for all devices which is definitely a necessity these days.

As always thank you for reading and please share it around as much as you can! Please feel free to put any suggestions or ideas for future tutorials in the comments section below.

Posted in CSS