HTML5 Video Backgrounds

Spain Project

I made a quick website for Spanish class that you can see here: Hola, España. There's not much of a writeup needed here, as a lot of the design aspects were reused from the Geneaology Project. However, there is one interesting new thing: the background video. Using video backgrounds allows one to create advanced animations without using Javascript. They can be found on the websites for Magic: The Gathering and Webflow

Make anything a background

CSS has a very useful property z-index. If you want one element to appear behind the rest, set a negative z-index. If you want one element to appear above the rest, set a positive one. This way, anything with a very low z-index can be effectively in the background.

The <video> Tag

The <video> tag was introduced in HTML 5. It's one of the more difficult-to-use tags, as unlike <img>, ansrc attribute won't set the source of the video. You have to include a <source> tag inside the video, and that has the src attribute. Furthermore, you have to explicitly set how the video will play as a series of attributes - <video controls> is a video using the browser's built-in controls, and <video autoplay loop> has the video automatically start and loop.

That may seem unnecessarily difficult, but it does have one key advantage - the user can set multiple sources, so if the browser cannot render the video from one source, then it can switch to another. Furthermore, if the <video> tag is unsupported, the content inside the tag will appear as text, allowing sites to send errors when video, or indeed HTML5 in general, is unsupported.

Videos, like images, can have width and height set as attributes or as CSS properties, and the z-index can be applied, but if you apply width, height, and z-index, you might notice that it's still being sized improperly. The fix for this is the object-fit property. As it turns out the property is very similar to background-size, so setting it to cover will fix the problem.