How to Add a Video Background in Elementor (Without Slowing Your Site)

A short, looping video background behind a hero section can make a website feel premium: a cafe pouring coffee, a team at work, a product in use. Done badly, it slows the site and makes text hard to read. Here is how to do it well in Elementor.

Step 1: Prepare the video

• 10 to 20 seconds that loops smoothly.
• 1280 to 1920 pixels wide, exported as MP4 (H.264).
• Remove the audio track; background videos are muted anyway.
• Compress it (HandBrake is free) to under about 5 MB.
• Only use footage you own or have a licence for.

Step 2: Add it to a section

1. Edit the page with Elementor and select the hero container.
2. Go to Style > Background and choose the Video icon.
3. Paste a YouTube link or the URL of your MP4 from the Media Library.
4. Set start and end times if needed, enable Play Once or leave it looping.
5. Add a Background Fallback image, shown while the video loads and on devices that don't play it.

Step 3: Add an overlay for readable text

In Style > Background Overlay, add a dark color or gradient at 40 to 60% opacity. White headings stay readable over any frame of the video.

Step 4: Decide on mobile

Elementor's Play On Mobile option controls whether the video plays on phones. For the fastest mobile experience, leave it off and let the fallback image show.

Keep it fast

• Use one background video per page at most.
• Check PageSpeed Insights before and after.
• Keep the main heading as real text, not burned into the video, so Google can read it.

Building a full landing page around it? See creating a landing page in Elementor.