◦ Comprehensive security
◦ 24/7 support
WordPress Guide → Development → Add Video Background
How to add video background in WordPress (including HTML)
Want your WordPress site to instantly grab attention? Adding a video background can give your homepage, landing page, or hero section a sleek, modern vibe that static images just can’t match.
Let’s walk through several beginner-friendly ways to add a video background in WordPress—no coding experience required (unless you want it).
Get fast, reliable hosting for WordPress
Power your site with the industry’s fastest, most optimized WordPress hosting
1. Add a video background using the Cover block in Gutenberg
If you’re using the built-in WordPress block editor (also called Gutenberg), the Cover block is the easiest way to add a video background without any plugins or custom code.
Steps to add a video background with the Cover block
- Open the page or post you want to edit in the block editor.
- Click the + button in the content area and search for “Cover”.
- Choose the Cover block from the list of available blocks.
- Inside the Cover block, click “Upload” or “Media Library” to add your video.
- Supported formats: MP4 is the best choice.
- Keep your video under 5MB for performance.
- Supported formats: MP4 is the best choice.
- Customize your background:
- Focal point lets you control which part of the video stays visible.
- Adjust opacity or add a background overlay color to make text more readable.
- Focal point lets you control which part of the video stays visible.
- Add any overlay content like headings, paragraphs, or buttons on top of the video.
- Click Update or Publish to save your changes.
Pros and limitations
- ✅ Built into WordPress, no plugins needed
- ✅ Great for simple hero sections
- ❌ Doesn’t support advanced features like autoplay settings or mobile fallbacks
- ❌ Some themes may override styles
2. Use a page builder to add a video background
Page builders like Elementor and Beaver Builder offer more powerful video background features. You’ll get more control over autoplay, looping, fallback images, and mobile behavior.
Elementor method
- Open your page with Elementor.
- Hover over or click a section, then go to the Style tab.
- Under Background, choose Video as the background type.
- Paste a YouTube/Vimeo link or upload an MP4 file.
- Customize video settings:
- Toggle autoplay, loop, mute, and play on mobile.
- Set a fallback image for unsupported browsers.
- Toggle autoplay, loop, mute, and play on mobile.
- Add content widgets (like text, buttons, or images) on top of the video.
- Click Publish.
Beaver Builder method
- Open the page with Beaver Builder.
- Add a Row or Section, then click to edit it.
- Under Background settings, choose Video.
- Upload an MP4 video or paste a YouTube/Vimeo link.
- Customize:
- Choose loop, autoplay, and mute options.
- Add a fallback image.
- Choose loop, autoplay, and mute options.
- Add modules like headings or buttons on top.
- Save and publish.
Why use a page builder?
- More control over design and layout
- Works better with most modern WordPress themes
- Easier to make mobile adjustments and fallback images
3. Add a video background with HTML in the Custom HTML block
If you’re comfortable using a bit of code or want full design flexibility, you can embed a video background directly using HTML and CSS.
Sample HTML video background code
<video autoplay muted loop playsinline id="bg-video"> <source src="https://your-site.com/path-to-video.mp4" type="video/mp4"> Your browser does not support HTML5 video. </video> <div class="content-overlay"> <h1>Welcome to My Site</h1> <p>This is an example of a video background using HTML.</p> </div>How to insert it in WordPress
- Go to the post or page where you want the video background.
- Add a Custom HTML block.
- Paste the HTML code shown above.
- Replace the src value with your own video file URL.
- Click Preview to make sure it looks right.
- Publish your changes.
Optional CSS to make it responsive and styled
To make sure your video stretches to fill the background properly:
#bg-video { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; z-index: -1; } .content-overlay { position: relative; z-index: 1; color: white; text-align: center; padding-top: 40vh; }You can add this CSS in Appearance > Customize > Additional CSS.
Recommended video formats and file size tips
Video backgrounds can slow down your site if you’re not careful. Follow these tips to avoid performance issues:
- Use MP4 format for maximum browser compatibility.
- Keep videos under 5MB—the smaller the better.
- Avoid audio—most users don’t expect sound in a background.
- Use short loops (5–15 seconds) to reduce loading time.
- Always add a fallback image in case the video fails to load.
Best plugins for adding video backgrounds in WordPress
Plugins can simplify the process or unlock new styling features.
Popular plugin options :
- Elementor – Drag-and-drop editor with video background support built-in.
- Advanced WordPress Backgrounds (AWB) – Adds video and parallax backgrounds to Gutenberg blocks.
- Kadence Blocks – Adds row layout blocks with built-in video backgrounds.
- Blocksy Companion – Works with the Blocksy theme to enable advanced background options.
Make video backgrounds mobile-friendly
Not all mobile browsers handle video backgrounds the same way. Here’s how to optimize:
- Mute the video (again)—some mobile browsers block autoplay unless the video is muted.
- Use a fallback image (still)—upload a static background image that appears when the video doesn’t play.
- Use media queries to hide the video on small screens and show a static image instead:
@media screen and (max-width: 768px) { #bg-video { display: none; } .mobile-fallback { background-image: url('fallback.jpg'); background-size: cover; height: 100vh; } }- Test on multiple devices to make sure the layout looks good everywhere.
SEO and accessibility tips for video backgrounds
Adding a video background can enhance your design, but it shouldn’t hurt your user experience or SEO.
- Don’t place important text directly on top of fast-moving video.
- Use high contrast between video and text for readability.
- Add a fallback image with alt text for screen readers.
- Avoid videos with sound—they’re distracting and not accessible.
- Use lazy-loading techniques to avoid slowing down page load times.
- Keep key content and links outside of the video section so search engines can still crawl them.
Next steps for adding a video background in WordPress
Adding a video background in WordPress is a powerful way to enhance your site’s visual impact, whether you’re showcasing a product, telling a story, or just making your design pop.
Start by choosing your method—Gutenberg, a page builder, or custom HTML—based on your comfort level and design needs. Then follow the steps in this guide to get it live.
Ready to upgrade your WordPress experience? Professional hosting improves speeds, security, and reliability for a website and a brand that people find engaging and trustworthy.
Don’t want to deal with server management and maintenance? Our fully managed hosting for WordPress is the best in the industry. Our team are not only server IT experts, but WordPress hosting experts as well. Your server couldn’t be in better hands.
Click through below to explore all of our hosting for WordPress options, or chat with a WordPress expert right now to get answers and advice.
Additional resources
What is managed WordPress hosting? →
Get details and decide if managed WordPress hosting is right for you.
How to push specific pages in WordPress →
Easily push specific pages from staging to live in WordPress without affecting the entire site.
A complete guide to WordPress shortcodes →
Shortcodes make life easier. Learn how to get started!