Background Video CSS

A background video that fills the whole browser window. The word "background" refers to the writing overlaid onto it; an intriguing effect not often seen. Most likely, the main cause is that a video file cannot be specified as the background image in CSS. To finish it, some layout cunning will be required.

Of course, a background film taking up the entire page would be a bit much. It is possible to do it tastefully, I would say. I am more interested in the how-to of finishing it, if necessary, and various potential patterns it may take than in debating design philosophy here (maybe later).

The fundamentals of tastefulness are still important to note here:

• No sound. By default, at least. Opt-in audio is appropriate.
• Be mindful of your bandwidth. Video content is the heaviest item you can put on a website. Please take note that this is a video that was not specifically requested.
• Make it available. Since you will most likely be overlaying text on top of the video, ensure the contrast is sufficient for legibility.

In honour of the trip that Media Temple and I will see ZaneRay, let's do this thing Montana style.

The How-To of Full-Page Background Video

Here, we are in luck. Dudley Story has previously conducted many studies on this topic and has provided us with a useful setup. He has a sample page as well.

Of course, we must post the video on the page, so here it is:

There are several qualities present! When a video loads slowly or doesn't load at all, the poster property provides the video with an image to display. Consider using a background in CSS as well.

The autoplay property exists because we want the video to start playing automatically. Recall that we are being considerate; thus, this is OK. The user cannot start or stop the video since no controls exist. To make this function on iOS, use the playsinline property. In addition to being a tasteful choice (because the video should not have audio in the first place), the muted property is necessary for iOS for autoplay to function. After that, loop, well, loops.

You may do this to have the video fill the full page:

CSS:

You will receive a full-page video for that! Good!

Let's now examine a few patterns. A full-page video can be handled using only one method, while several other options exist.

Just One Viewport

We have positioned the video. We may now place anything on top of it.

Take some text like this:

That may be positioned relative to the video and placed after it to appear on top. Next, do a small amount of centring:

We have the simplest possible effect:

Html:

CSS:

Other items that we like might be positioned wherever on the page. Although it's not fashionable, we could even remove a section of text that scrolls on its own to keep the "full page" impression.

HTML:

CSS:

One Viewport Header, Scrolls Away

Other components might scroll away as the video plays in full screen mode. The header does not need to be altered at all! In this sample, the body copy appears as expected while the header text, which is still perfectly filled in the viewport, scrolls away. It is even semitransparent, allowing the still video behind it to be seen.

HTML:

CSS:

JS:

One Viewport Header, Content Scrolls Over Header

The content might glide over the header text above the video or stay fixed. Using margin-top: 100vh to fix the position of the video and header while ensuring that the primary content is pushed off the viewport is one technique to do it.

HTML:

CSS:

Taking it a step further, we could have the header text fade into the background as we scroll by wiring in some opacity and scale adjustments to the scroll position. Using CSS custom attributes makes it simple! This is the demo.

HTML:

CSS:

JS: