You land on a website for a new artisanal coffee shop in your area. Right from the jump, you’re mesmerized by a high-quality video taking up your entire browser window. It quietly loops behind the main content—a close-up of coffee beans being roasted, a barista making latte art, happy customers laughing in between cappuccino sips. It tells the brand story without saying a single word.
So how do you achieve this on your own ecommerce site? Do you spruce up your HTML file with inline CSS to play this kind of video? Do you create a separate CSS file and link it to the HTML page? What about JavaScript code? Luckily, it’s a lot simpler than you might think to add video background to your website.
Let’s discuss what full-screen video backgrounds are and how to add a video background to your site with few stand-out examples.
What is a CSS background video?
A CSS background video plays behind the text and navigational elements on a webpage. It’s often the first thing visitors see, is typically soundless, and reinforces your brand message. This video element is actually placed in the HTML file, but CSS controls its appearance. This ensures it spans the screen, stays tucked behind everything else, and adapts to different devices. It’s a great way to quickly capture visitor attention and increase engagement.
How to create a background video in CSS
- Insert an HTML <video> tag
- Apply CSS to position the video correctly
- Add foreground content
- Make sure it works on mobile
Setting up a full-screen video background is a bit more involved than just adding an image background, but it’s not hard once you understand the pieces involved. Here are the basic steps for adding a full-screen video background to your site using CSS and HTML, including code examples.
1. Insert an HTML <video> tag
Start with HTML to define how your video appears in the browser. This code sets up the structure, signaling the browser to display a background video.
For example:
<video autoplay muted loop playsinline id="background-video" poster="https://yourserver.com/videoposter.jpg”>
<source src="your-video.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
The id="background-video" in the above example ensures your CSS applies to the video. The video code handles the video playback. The autoplay attribute starts it as soon as the page becomes visible to the user. The poster attribute displays a still image while the video loads—best practice is to capture and use the first frame of your video for a seamless start.
Most browsers—including Chrome, Safari, Firefox, and Microsoft Edge—require a muted attribute for autoplay to work and to avoid disrupting screen readers. The loop tag keeps the video playing continuously, while the playsinline tag keeps it embedded in the page, preventing fullscreen interruptions on mobile devices for a better user experience.
2. Apply CSS to position the video correctly
The CSS below positions the video as a full-screen background:
#background-video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
z-index: -1;
object-fit: cover;
}
This CSS code ensures the video stays fixed to the background, stretches to fill the screen by setting the min-width and min-height to 100%, and stays behind other content (z-index: -1). The code object-fit: cover maintains the video aspect ratio to avoid distortion.
3. Add foreground content
The following HTML and CSS code ensures your site content—like text or navigation buttons—appears overlaid on top of the video. To start, here’s the HTML:
<div class="hero-content">
<h1>Welcome to Our Store</h1>
<p>Discover our latest arrivals</p>
<button>Shop Now</button>
</div>
This code creates a container (<div>) with the class hero-content, holding your main content: a heading, paragraph, and “Shop Now” button.
Now, you can use CSS to style the class:
.hero-content {
position: relative;
z-index: 1;
text-align: center;
color: white;
font-family: Trebuchet MS;
font-weight: bold;
font-size: 2rem;
padding: 20vh 10vw;
}
Using position: relative lets any child elements of the class (e.g., anything nested directly inside the .hero-content element) to remain within the container. It also ensures the z-index places the .hero-content class above elements with a lower stacking order—like your background video.
The code text-align: center centers the content, color sets the text color, and font-family and font-weight define its appearance. A font-size of 2rem doubles the base font size defined in the root element—so if the root is set to 8px, the text will render at 16px. The padding statement uses viewport units (vh and vw) to add space inside the container based on the screen size.
4. Make sure it works on mobile
To optimize your background video for mobile devices, you need to adjust your layout to ensure the video fits the screen and your content remains readable.
Use this CSS to maintain a full-screen background video and adapt the content layout for smaller screens (750px wide or less):
#background-video {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
object-fit: cover;
z-index: -1;
}
@media (max-width: 750px) {
.hero-content {
font-size: 1.5rem;
padding: 15vh 8vw;
}
}
The object-fit: cover makes sure your video fills the screen and retains its original aspect ratio, preventing distortion, while min-width: 100% and min-height: 100% make sure it stretches out to fill the entire window. The media query changes the content’s font size and padding on smaller screens, so your text stays legible and properly positioned over the video.
Background video examples
Here’s a look at how three real ecommerce stores effectively use a fullscreen video background:
Supergoop

Supergoop sells non-gloopy, SPF-powered lotions to protect against harmful rays. The company grabs your attention on its homepage with a bright, professionally produced video full of playful winks and quick cuts.
What works: It’s bold, fast, and instantly on-brand. The opening shot features actors in the brand’s signature bright colors, followed by a quick motion and a striking product reveal. The headline “You’ve never felt SPF like this” stays on screen to clearly deliver their main value proposition.
Polaroid

Polaroid’s homepage features multiple background videos, highlighting its different signature products. The one at the top of the page showcases the Polaroid Go, leaning into the nostalgia factor of the brand, while also showcasing the product from multiple angles.
What works: This screams nostalgia while appealing to a modern, color-loving crowd. The video quickly shows off the new camera and the kinds of photos it takes, while the Shop button at the bottom directs site visitors to the product page.
Golde

The moment you see the background video with a teaspoon of green powder, hot water pouring in, and a beaker-to-glass pour, you instantly get what Golde is all about. The overlaid text seals it: “Superfoods for Every Mood.”
What works: The motion, super close-up video shots, and a simple three-scene structure clearly convey what this brand is all about. The pacing of the video editing—two short clips followed by a slightly longer one—tells an effective story efficiently.
Background video CSS FAQ
Can you set a video as a background in CSS?
Not exactly. CSS doesn’t let you assign a video the same way you would a background-image. Instead, you place the video directly in your HTML code, then use CSS to make it behave like a background—stretching it across the screen, positioning it behind your content, and making sure it scales well across all devices.
Can you embed a video in CSS?
No. CSS is a styling language, not a markup language. You embed the video within the HTML so you can control how it looks with CSS.
Can you make a background video responsive in CSS?
Yes. With properties like object-fit: cover and responsive containers, background videos can scale to fit different screen sizes without breaking the layout. Always test your site on both desktop and mobile.