Homepage Random Background Cover Video

I'm not a front-end developer but I love websites with homepage background video. So I decided to try to implement it by myself. But what I wanted was to have random videos.

First of all I followed some tutorials to have a full working video background (scaled and centered accordingly to the video size) and then I've done some improvements (and tricks) to specify multiple videos without loosing browser performance and avoiding eager loading of the videos that are not displayed.

You can find my results in this jsfiddle. I show also some tricks to avoid the video background on devices smaller than a small computer screen (or a big tablet). Feel free to use and improve it.

This is the full code from jsfiddle, you cannot see the video in the result section because its size is too small in this blog (resize it in a new jsfiddle window to see what happens).

The code is already commented and explained. But if you have some questions you can ask me and I can add some further explanations below.

Andrea Tarquini

IT Geek, Full Stack Developer, Programming Language Polyglot and IT security fan.

https://github.com/h4t0n https://twitter.com/h4t0n