If you want to engage first-time visitors on your website, you have about 10 to 20 seconds to do so. Life is short, and nobody wants to waste their time on a run-of-the-mill webpage. So, how can we inject some life into our page content in a way that captures visitors’ attention and keeps them scrolling?
One option is adding a video to your website in the background. Video backgrounds take up the entire width and height of the viewport (in other words, the visible page area) and add some visual flair to boost engagement. Over this video, you can place your featured page content — after all, it is just a background, and your content is most important.
I am on the fence for this design style. A full page video background may be a bit much even if done tastefully. That aside, I am more interested in HOW to get this done. Here you go!
- The autoplay attribute starts the video automatically once the page loads.
- The loop attribute plays the video in an infinite loop.
- The muted attribute turns off sound for the video. Refrain from playing video sound on your page unless initiated by the user. Doing so presents an accessibility issue and a potentially unpleasant user experience.
- height: 100vw (viewport width) make the video extend to the full width and height of the viewport.
- object-fit: cover automatically sizes the background video to keep its original aspect ratio while filling the screen, clipping out edges of the video when necessary.
- position: absolute and the following left, top position the video relative to the viewport and separates it from the rest of the page content. This keeps the video in place when the user scrolls, and allows other content to sit on top of it.
- z-index places the video background under accompanying content.
View source code here: Link