Back to Browse

How to Code A Full Screen Video Background using HTML, CSS, Bootstrap

11.6K views
Mar 22, 2019
11:06

This tutorial will show you in just over 10 minutes how to create a stunning video background on your website. We're going to be using the latest techniques and a small JS helper to allow it to work perfectly on internet explorer as well. When I say the right way, I mean the best possible way so it is supported on most devices. We will be using: HTML5, CSS, Bootstrap and object-fit-videos.js, accessible here: https://github.com/TricomB2B/object-fit-videos. It's highly advisable to use SASS for this for ease of use, but I've done it using plain CSS. An HTML5 Full Screen Video on your website can make a massive impact. It's an amazing thing if done right. You want to also make sure your Full screen HTML video works on as many devices as possible. Hopefully this tutorial will assist you in learning how to do that!

Download

1 formats

Video Formats

360pmp416.1 MB

Right-click 'Download' and select 'Save Link As' if the file opens in a new tab.

How to Code A Full Screen Video Background using HTML, CSS, Bootstrap | NatokHD