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.
<video> tag was introduced in HTML 5. It's one of the more difficult-to-use
tags, as unlike
src attribute won't set the source of the video.
You have to include a
<source> tag inside the video, and that has the
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
<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
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
background-size, so setting it to
cover will fix the problem.