Creating a fullscreen HTML5 video background playlist

Going back to one of my previous posts I shared some information and demonstrated how to create a fullscreen HTML5 video background using only CSS.

If you haven’t yet managed to read that one, please go ahead and take a few minutes to do so now, before reading with this post. It’ll be easier for you to follow along since this post starts essentially where the first one left off.

In this post I’ll simply show you how to create a video background playlist.

Since the HTML/CSS are mostly the same, I’ll just paste the final code here and point out the changes.

The .fullscreen-bg div has a new id.
There’s a new section containing links to 3 new videos. This will serve as our playlist.

Besides a selection of small changes to the content styling, the only notable change in the stylesheet is the following piece of code:

Looking at the previous post we didn’t have any JavaScript. We managed to pull off a fullscreen video background using only CSS. Unfortunately that won’t be the case with our background playlist. In order for our playlist to work well we’ll need the following block of code. Remember, it doesn’t actually matter if you add it within a script element at the bottom of the .html or in its seperate .js file linked in the head of the page.

Please go ahead and check out a working example: DEMO PAGE

NOTE: Although the fact of having multiple videos playing in the background sounds kind of nice, you should always be mindful of the website performance. If you plan to add more than one video to your website try to reduce the file size as much as possible as this will certainly help you to avoid any performance issues.