On the left is how quickly our site loaded before the video, on the right is after. The time it took more than doubled. One second is still pretty good, right? Yes, of course, for a completely default WordPress site with nothing else on it.
However, most websites are not just a blank slate. When it comes to a WordPress site, they usually have plugins, customized themes, and CSS and Javascript. Imagine what a video like that would do to a typical site.
Accessibility concerns
In addition to slowing down a website, background videos can be a major accessibility issue.
We recently sat down with Amber Hinds from Equalize Digital to discuss why website accessibility is no longer optional. As a follow up to that discussion, we talked to Chris Hinds, also from Equalize Digital, about practical ways and tools for agencies to catch up on their accessibility debt.
We strongly recommend watching those livestreams to learn more about the topic from professionals in the field itself. As for our purposes in this blog, background video in the context of accessibility comes down to this:
These two drawbacks are the biggest when it comes to online accessibility, but they are pretty severe. If your website is difficult to read or discomforts visitors, the background video is probably not a good idea. We asked George what his thoughts on accessibility are, and he agreed.
Animations can also distract users if overused. Too many moving elements can overwhelm visitors and make it harder for them to focus on the main content. Some users, particularly those with motion sensitivity, may also find animations uncomfortable or disorienting.
We are sure you’ve encountered at least one site where the background video made it difficult or impossible to read the superimposed text. Not to mention that, as Nathan said, (almost) nobody is going to sit there and watch the full video.
If you are set on using a background video, though, there are a few ways to make it work.
Tips on how to make background video work
At the end of the day, clients will want what they want. For agencies that means all they can do is explain the pros and cons of background videos and honor the client’s decision.
Fortunately, there are a few things you can do to make background video less impactful on a site’s speed and accessibility.
The most important rule, according to George, is to have a clear, unambiguous purpose.
Make sure they tell the right story or lead the user in the right direction. Never use one unless you have good reason.
Beyond purpose, the biggest practical concern is file size. A compressed, well-optimized video will always perform much better than a raw export. At hosting.com, George and the team use tools like Jitter to create polished, optimized animations while keeping the file size small.
However, sometimes a full background video is unnecessary when a lighter alternative exists. Consider using Lottie animations or CSS-based effects, when possible, which can achieve a similar effect to a video.
If full background video is non-negotiable, here are a few things to keep in mind:
Keep the video short and looping.
If audio is not vital, strip it entirely, as it also adds to the size.
Compress it for the web with tools like HandBrake.
Have a fallback/placeholder image for users on slow connections.
Follow these tips and any background video you choose to use should still look good and crisp, without a noticeable hit to your site’s performance.
Background video: worth it if you do it right
There’s a good reason background video gets a bad reputation, but that doesn’t mean it can never work.
The key is being intentional. A well-optimized, thought-out video or animation can genuinely elevate a page, add personality to a brand, and create an experience that static images simply can’t match.
Where problems arise is when video is added for its own sake, without considering performance, accessibility, or purpose. Keep file sizes and users in mind when deciding if you should use background video. As George puts it:
If you can add animations that improve user experience and don't kill website performance, do it.
And if you have any questions about website performance, WordPress, agency work, or hosting in general, join us for Office Hours, where Nathan and our community will answer live.
FAQ
Does a background video affect a site's Core Web Vitals scores?
Yes, and the impact can be significant on metrics that Google uses directly as ranking signals. Largest Contentful Paint (LCP) is typically the most affected. If the background video is the largest visual element in the viewport when the page loads, the browser must fetch and begin rendering it before LCP can be recorded, which pushes that metric in the wrong direction.
Cumulative Layout Shift (CLS) can also be impacted if the video element loads asynchronously and causes other page elements to reflow.
Are there legal or compliance considerations for using background video that site owners often overlook?
A few worth knowing. The most common is music licensing: background videos that include copyrighted music require proper licensing for use on a commercial website. Stock video platforms typically license the footage itself but not any music in it, so site owners who download a stock video without realizing it contains licensed audio may inadvertently be in violation.
Accessibility law is another angle: in jurisdictions covered by the ADA (US) or similar legislation, moving content that cannot be paused can constitute an accessibility barrier for users with motion sensitivity conditions. Adding a visible pause control for any auto-playing video isn't just good practice; in some contexts it's a legal requirement.
Finally, for sites operating under GDPR, if the background video is hosted by a third-party platform that sets cookies, this needs to be addressed in the cookie consent setup.
Does a background video affect mobile users differently than desktop users?
The impact on mobile users is considerably more severe, for two reasons. First, mobile devices have significantly less processing power and memory than desktops, meaning the CPU and RAM cost of decoding and rendering a looping video hits proportionally much harder.
Second, mobile users are often on metered data connections, so auto-loading a video in the background consumes their data without any choice in the matter, which is a poor user experience by any measure. For these reasons, disabling the background video on mobile and serving a static image instead is widely considered best practice.
If a client insists on a background video and I've explained the downsides, how should an agency document that conversation?
This is an important professional consideration that often gets handled informally when it should be documented. The most practical approach is to follow up any verbal discussion with a brief written summary like a simple email. It should outline the performance and accessibility trade-offs explained, the client's decision to proceed anyway, and the specific optimizations that will be implemented to mitigate the risks. This creates a clear record that the agency fulfilled its duty to advise, protects the agency if the client later attributes SEO or performance issues to the video, and sets expectations about what the implementation will and won't achieve.
