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:
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.