Guidelines for Better Website Background Videos
TL;DR
- Maximize compatibility with your visitor’s devices. Design around low maximum bandwidth to ensure fast page loads and a smooth experience. Use MP4s for short videos to ensure maximum playback success.
- Avoid drawing attention to your background video. A good background video should complement your content, not supplement it. Ensure contrast between your background and foreground, and ensure that your visitors' eyes land on your most important information.
- Mux provides all the tools you need to host, embed, and deliver background video content to your website visitors, all while saving on overall costs.
Why is Background Video Important
Background video is an attractive design element that can quickly inform your customers’ opinions about your brand or website. A good background video adds a subtle touch to your website, and shows an extra level of care and attention.
As modern devices improve, and support for newer codecs, HTML5 video, etc. continue to develop, the possibility space for background videos continues to grow.
So what’s the best way to embed a background video on your website, and how can we do it while minimizing the cost, and maximizing the impact.
How to ensure your video loads quickly
Ensure that your video element is set to preload="auto", this tells the browser to start downloading the video as soon as possible. HTML is read by the browser from top to bottom, so ensure that your player is defined early. If utilizing an MP4, preload the content in your HTML head using <link rel="preload">. Consider using a lower resolution video as well (something like 720p) in order to improve loading times and reduce data consumption.
Using an overlay to hide artifacts and make content pop
Often, you’ll want to dim or otherwise overlay your background video in order to make your content stand out atop it. A simple way to do this would be to overlay a black box over your div with an ::after element in CSS, setting the opacity accordingly. There also exist more complex methods for overlaying patterns such as crosshatching, gridding, etc. Make sure to set pointer-events: none; on your overlays so that users can still interact with the element underneath! Always ensure that content placed in front of your overlays and video elements has a higher z-index, so that it appears above your background, and pick lighter colors that will pop against a darker background (or lighter if you’re using a light background video!).
Limiting the length of your video with Mux
Oftentimes you’ll want to only show a small portion of a larger demo reel for your background video. Mux makes this easy with clipping. Select either asset-based clipping to create a new version of your original video, or instant clipping to deliver only a specific slice of an existing video asset to your end users. Limiting the length of your background video not only keeps your visitors moving, but also decreases delivery costs and the likelihood of your player re-caching your video.
Avoid excessive movement, or changes in brightness
A background video should be just that, a background. Make sure when designing your site, that you draw your visitor’s attention to your content, not your video. Significant movement or changes in brightness can quickly distract visitors from your main page, or make content more difficult to read. If you need to show multiple different scenes with differing brightness, consider placing them in different locations on the page/site, or putting them in a carousel.
Overflow your video to fit your container
Black bars surrounding your video will interrupt the flow of your site, and can present an unprofessional image. When dealing with many different devices, it can be difficult to ensure that the aspect ratio of your container will match expectations. For this reason, it’s advisable to use object-fit: cover; for your player/video elements. This property ensures that the video is scaled to fit, rather than showing any black bars. You’d also be keen to keep this in mind when designing your video; for instance, avoid placing important information near the sides, where they could get partially, or even completely, cropped out.
Provide a placeholder and a fallback
Your visitors shouldn’t suffer a wait just because you have an awesome video to show them, and you shouldn’t default to nothing if your video element fails to load, or is blocked. Consider using a representative frame of your video as a poster or background element to load first, thus ensuring a quick page load, and a smooth experience. Mux makes this easy with thumbnail queries. Simply specify a few parameters and you can have a still from your video asset with no extra steps or hosting required. Most video players, such as Mux Player, also let you specify a poster image that will fill the player window before playback begins.
Read Mux’s blog post on autoplay
Sometimes autoplay can give you a real headache with background video. For a video that shouldn't receive user interaction, playing by itself is of critical importance. While it seems like it should be as easy as setting the autoplay attribute on your player, sometimes that couldn’t be further from the truth. Check Mux’s blog written by Dylan here to learn about why browsers may be stopping your videos from starting automatically, and some tricky methods to workaround these common browser restrictions.
Pause your playback when your visitors aren’t looking
Help save device CPU and reduce the likelihood of frequent re-caching by pausing your video when your user scrolls past it (alternatively, pause after a certain number of loops). Utilize IntersectionObservers to detect when an element is in or out of view like so:
const video = document.querySelector('video');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
video.play();
} else {
video.pause();
}
});
}, {
threshold: 0.5 // How much of the element must be visible to take action
});
observer.observe(video);If you have videos further down the page, this method can also be used to lazy load their playback!
Compare HLS with MP4
Depending on your use case, consider using MP4 over HLS. HLS is the standard in web video when content is longer, or requires adaptive quality. However, for a short background video, MP4 may be more compatible, easier to work with, and easier to preload. Luckily, with Mux, MP4 copies of your assets are only a single API request away. You can read more about Mux’s static renditions here.
Try out Mux’s tailor-made background player
For playing video in the background, nothing beats a custom player made just for that case. Check out Mux’s background player, tailor-made for playing video in the background. Mux Background Video is super lightweight and perfect for hero sections, landing pages, and immersive experiences, and features a custom web and React components for easy integration to any website.
FAQ
What are some good video players for embedding my video?
Some great options for video players include: Mux Background Video, hls.js, video.js, Mux Player, or Plyr, to name only a few.
What are some top video hosts for hosting my background video?
Common video hosts include, but are not limited to: Mux, Vimeo, Bunny, and Cloudflare Stream.
Why would I want to host my video on a third party, when I could host the video directly?
Hosting a video directly is great if you are hosting a small, personal site, with local traffic. However, as traffic scales, delivery and hosting become increasingly complicated. Additionally optimizing video for delivery can get tricky and time consuming.
Why isn’t my background video playing automatically?
Check out Mux’s blog on autoplay here to learn about why browsers may be stopping your videos from starting automatically, and some tricky methods to workaround these common browser restrictions.
What’s the best resolution for a background video?
A background video’s best resolution will be dependent on the use case. For instance, if you expect your video to be a main focus, viewed on full screen monitors, you may wish to opt for a 1080p video. For most use cases, however, a 720p rendition should suffice, saving your visitors data, and you on delivery costs.
Can I use a GIF instead of a video for my background?
Yes! A gif can certainly be used in place of a background video, however, keep in mind that GIFs can often be lower quality and larger size than an equivalent video file. For making short GIFs from existing assets, check out Mux’s APIs for thumbnails and GIFs.
How does video caching impact costs, and what can we do to maximize caching?
With most video hosts, your monthly bill will come, in part, from how many bytes (or in Mux’s case, how many minutes) are delivered to your end users. If a user’s device does not cache your video for a long period of time, they may be invoking additional delivery costs with each loop. To attempt to decrease the odds of this happening, consider using an MP4 rendition, and keeping your background video’s length to a minimum.