Background videos for your website: examples and advice
Learn how to use high-quality background videos for your website, navigate cross-device optimization, and compress videos into gifs.
Background videos have the potential to pique the interest of site visitors and transport them into an immersive experience when used effectively.
A website’s background videos can be an engaging addition. However, if they are not done well, they may annoy visitors and cause them to leave the website.
Background videos can encourage visitors to engage with the content of a website, whether it is a personal portfolio, an e-commerce store, or a blog. However, videos can also be harmful or distracting. It is essential to keep accessibility concerns in mind when designing motion.
In this guide, we look at some of the best websites that use background videos and talk about how to use them more effectively in your designs.
Four examples of websites with video backgrounds The best websites have video backgrounds that captivate viewers without taking away from the main content of the website. While complementing the other elements of the website, their primary function is to keep visitors engaged and present.
Seeing this design feature in action is a great way to learn how to use background videos to your advantage. Here are five websites that make excellent use of website video backgrounds.
Warning about photosensitivity: The following websites load with motion.
1. OSCO Studios
OSCO Studio is a content and strategy-focused creative agency. The background video for the brand’s landing page is fullscreen, and the page’s top navigation bar is transparent.
Behind previous client logos and calls-to-action (CTAs) such as “get in touch,” footage from the agency’s visual advertising work—a wide variety of shots from beaches and blue skies to mountains and sports cars—is displayed in a seamless video loop. OSCO Studio’s use of background video demonstrates their adaptability and capacity to produce world-class video and photo content, letting potential clients know that they can anticipate stunning results.
2. The Royal from Seed Mobile
This website features background video clips of the Royal, a phone that was produced by Seed Mobile.
Behind the text that reads “THE SEED ROYAL UNVEILED,” site visitors are greeted by a slow-motion, high-quality video of the phone and its features. To match Seed’s branding, the video has a black background with green accents and plays in a seamless loop.
The graphics in the background video pique the Royal’s interest without detracting from the other features of the website, which include a one-of-a-kind interactive 3D model of the product.
3. Jacob Nordblad and Aleksi
Puska founded Milk Truck films, a videography firm based in Finland. Visitors are greeted on the homepage by a static screen with the company name and an arrow pointing downward, enticed to scroll. Video clips from various projects play in a loop as you scroll down the page.
Milk Truck showcases their videography skills through background video, but it also provides a lot of static content to keep visitors from being overwhelmed.
4. Austin Gomez
It is immediately apparent that the Austin Gomez website is solely focused on music. Austin collaborates with other artists to make music videos and showcases his portfolio through multiple background videos.
The first landing page features a video that loops, but further down, a grid of music videos with animated backgrounds and bright colors can be seen. Some videos have sharp and detailed backgrounds while others have bokeh (blurry) backgrounds. In order to mute the motion design and ensure that the text is visible, a black overlay is used on each video in the grid to highlight the white text.
An excellent illustration of a personal portfolio is Austin’s website, which features background videos that showcase his distinctive style. While clips from his work play in the background, a digital resume that visitors can scroll through is displayed.
Three places to find free stock background videos A site-specific video will tell the most compelling story because background videos should complement a brand’s narrative and identity. Custom videos, on the other hand, aren’t always an option.
It may be impossible to produce an original video due to production costs and timelines. The good news is that a free stock video can still convey the intended message.
You can find free background videos for your website at the following locations:
-Coverr: There are a variety of free stock videos on Coverr. They add new recordings consistently, so the assortment remains new. Animals, technology, food, and nature are all subcategories.
-Vimeo: While Vimeo isn’t itself a merchant for foundation recordings, numerous local area individuals disperse free stock film through the stage. Finding exactly what you’re looking for will take some digging, but you never know when you might find gold.
Videos from Peaks: Since Pexels is a great place to get free stock photos, it shouldn’t come as a surprise that they have a collection of videos. The granularity of the categories available makes this resource the most useful: You can, for instance, skip straight to “Trees” instead of going through everything that “Nature” has to offer.
Recommendations for your background videos Adding a background video to your website can help it stand out, but you need to choose your design wisely. Here are some pointers to help you out.
Provide pause options for videos. Visitors with vestibular disorders, epilepsy, photosensitivity, ADHD, and motion sickness may be harmed by excessive movement. Make sure videos have a play/pause button so people who don’t like too much motion can still enjoy your website.
Limit the record size. Large files associated with full HD or 4K videos slow down loading times. Your web page will load more slowly the larger it is, which may cause visitors to return to the search results in search of a page that loads faster. Compressing videos on websites like Clipchamp and HandBrake can be used to address this issue.
For mobile use, use gifs. Graphics Interchange Format is spelled GIF. They are short, looping image files that are mostly used on social media. However, you can use them instead of videos on your website to save space.
Videos don’t do as well on mobile devices as gifs do. Before uploading, it is best to reduce the file size using a specialized compressor like Imgur, GIPHY, or Ezgif because some GIFs are quite large.
Pick videos that are relevant. You shouldn’t use the first visually appealing video you find without thinking about its significance.
Background videos must be tailored to your products and services and appropriate for your website. It’s best to get custom footage from a videographer that shows the exact brand of the product you’re selling. However, if you lack the resources, you can select complementary tangential stock footage. A video of a forest, for instance, could be used by a company that sells camping gear to bring the outdoors into the website. Businesses that offer a service can use the same tactic: footage of a forest could be used to promote a website that offers guided tours of local trails.
Remember: Videos of a product don’t always suffice; they need to be promoted in a way that conveys a message to visitors and encourages them to buy.
Videos of a house being renovated with shattered walls and scattered debris do not appear on an interior designer’s website. Instead, background videos might show a house after it has been renovated with footage of a family smiling and enjoying their new home. This would show viewers that the designer’s services can also make them happy.
Utilize more limited recordings. Short videos speed up loading and reduce file sizes. Circling a short clasp to make the impression of a more drawn out video keeps designs drawing in without prompting buffering.
Use videos that aren’t going to help. Videos that play in the background are there for a reason and are not intended to be the focus of attention. They should complement the images in the foreground without obstructing the main content.
Utilize videos without sound. Avoid background videos that play loudly when a visitor opens the website on a laptop or mobile device. A potential customer could close the tab and go to a competitor’s website with a less distracting design right away.
Instead of using sound, use pictures to tell stories. Include a button in the corner so that visitors can turn on and off background music if sound or music is an important part of the user experience. Make sure that it is on mute by default.