Elementor Video Background That Plays on Scroll

Benefits of Adding a Video Background to Your Website

Adding a scroll-controlled video background to your Elementor site is not just about aesthetics — it delivers real, measurable benefits for your business and user experience.

1. Dramatically Increases User Engagement

A video background immediately captures attention. Studies show that visitors spend significantly more time on pages with video content compared to static image pages. When the video responds to scroll, visitors naturally want to keep scrolling to see what happens next — increasing your dwell time and reducing bounce rates.

2. Creates a Premium, Professional Look

Scroll-driven video backgrounds are associated with top-tier agency websites and high-end brands. Adding this effect to your Elementor website instantly elevates the perceived quality and professionalism of your brand — without spending thousands on custom development.

3. Tells Your Brand Story Visually

Instead of relying on text and images alone, a scroll-controlled video allows you to guide visitors through your brand story frame by frame. Each scroll reveals the next part of your narrative, creating an immersive experience that static pages simply cannot match.

4. Improves Conversion Rates

Engaging, interactive pages convert better. When visitors are emotionally engaged with your content — which scroll video achieves through interactivity — they are far more likely to take action, whether that’s filling out a form, making a purchase, or booking a call.

5. No Plugin Bloat or Extra Cost

Most scroll animation effects in Elementor require expensive premium plugins. The method in this guide uses pure Vanilla JavaScript and CSS — meaning zero extra plugins, zero extra cost, and zero impact on your site’s loading speed from plugin overhead.

6. Works With Free Elementor

You do not need Elementor Pro for this effect. It works perfectly with the free version of Elementor, making it accessible to everyone regardless of budget.

7. Better SEO Through Improved User Signals

Google’s ranking algorithm considers user engagement signals like time-on-page and bounce rate. By keeping visitors engaged longer with an interactive scroll video experience, you indirectly improve the engagement metrics that contribute to better search rankings.

How It Works — The Concept Explained

The scroll-driven video background works by using JavaScript to listen for scroll events on the page. Here’s the simplified flow:

• Page loads → background image (poster) is displayed
• Visitor starts scrolling → poster image fades out, video activates and starts playing
• Visitor keeps scrolling → video continues playing forward
• Scrolling stops → video pauses at the exact current frame
• Scrolling resumes → video continues from the paused frame
• Visitor scrolls up → video plays in reverse (optional advanced feature)

The key JavaScript techniques involved are: scroll event listeners to detect scrolling, setTimeout to detect when scrolling has stopped, native HTML5 video play() and pause() methods, and requestAnimationFrame for smooth reverse playback.

Everything runs in the browser with no server-side processing — making it extremely fast and lightweight.

What You Need Before You Start

Before you begin, make sure you have the following ready:

• WordPress website with Elementor installed (free version is fine)
• A self-hosted video file in MP4 format — uploaded to your WordPress Media Library
• A background image (JPG or PNG) to display before the video activates
• The CSS ID you want to assign to your main container (e.g. video-bg-section)
• Basic familiarity with Elementor’s editor interface

Important: The video must be hosted on the same domain as your website. Videos hosted on YouTube, Vimeo, or external CDNs will not work with this method due to browser security restrictions (CORS policy).

Step 1: Prepare Your Video and Image Files

Choosing the Right Video

For best results, your background video should follow these guidelines:

• Format: MP4 with H.264 codec (best browser compatibility)
• Resolution: 1080p or 720p (avoid 4K — too large for background use)
• Duration: 10–30 seconds is ideal for scroll-driven effects
• File size: Keep it under 10MB for fast loading
• Content: Abstract motion, nature, architecture, or product footage works best
• Audio: Not required — video will be muted for browser autoplay compliance

Optimizing Your Video

Before uploading, compress your video using a free tool like HandBrake or Clideo. Aim for a constant frame rate of 24–30fps. A well-compressed 1080p video suitable for a background should be between 3–8MB.

Uploading to WordPress

Go to WordPress Dashboard → Media → Add New and upload your MP4 video file. Once uploaded, click on the file and copy the File URL. You will need this URL in the HTML widget code. Do the same for your background image.

Step 2: Set Up Your Elementor Container

Create or Select Your Main Container

In Elementor, create a new Container or Section that will serve as your full-page video background. This container should span the full width of the page and ideally be the first major section below your header.

Set the Container Height

Click on the container to select it. Go to the Style tab and set the Minimum Height to 100vh. This ensures the container fills the entire viewport height, giving the video enough space to display as a full background.

Assign the CSS ID

With the container selected, go to the Advanced tab. Find the CSS ID field and type: video-bg-section (or your preferred ID). Press Enter after typing — this is important, as Elementor may not save the ID if you simply click away. This ID is what the JavaScript uses to target your specific container.

Leave Position as Default

In the container’s Advanced → Layout settings, leave the Position setting as Default. The CSS in our code will handle the positioning internally using position: relative and overflow: hidden, which are applied via the CSS ID selector.

Step 3: Add the HTML Widget

Drag in the HTML Widget

From the Elementor widget panel on the left, search for “HTML” and drag the HTML widget into your container. Place it as the first element inside the container.

Why Inside the Container?

The HTML widget must be a child element inside your #video-bg-section container. If it is placed outside or alongside the container, the CSS positioning will not work correctly and the video will not appear as the container’s background.

Open the HTML Widget Editor

Click on the HTML widget to select it, then click the Edit HTML button. You will see a plain text area where you can paste raw HTML, CSS, and JavaScript code. There is no visual/rich text toggle — it always accepts raw code.

Step 4: Paste the Scroll Video Code

Copy the complete code above and paste it into your HTML widget. Replace YOUR_VIDEO_URL with the URL of your MP4 video file and YOUR_IMAGE_URL with the URL of your background image.

Step 5: Configure the Container Settings

Z-Index for Inner Elements

If you have headings, buttons, or other content inside your video background container, you need to make sure they sit above the video layer. The code already handles the standard Elementor inner container classes (.e-con-inner and .elementor-container), setting their z-index to 3.

If any element still appears behind the video, click on it in Elementor → Advanced → Z-Index → set it to 5 or higher.

Background Settings in Elementor

Important: Do NOT set a background image or background video in Elementor’s Style tab for this container. Leave the background setting as None. Our HTML widget code handles both the poster image and the video background entirely — Elementor’s built-in background settings would conflict with our code.

Padding and Content Layout

You can add padding to the container as normal through Elementor’s Advanced tab. The video and poster image are positioned absolutely, so they will fill the container regardless of padding settings. Your content will sit on top of the video with the z-index values ensuring correct layering.

Step 6: Test and Fine-Tune the Effect

Preview in Browser

Click Update in Elementor and open your page in a browser (not in the Elementor editor — the editor’s preview mode can interfere with scroll detection). Scroll slowly down the page and observe the video starting to play.

Adjusting Scroll Sensitivity

The scroll stop delay is set to 200 milliseconds by default. This means the video will pause 200ms after scrolling stops. You can adjust this by changing the 200 value in the setTimeout call. A lower value (100ms) makes it feel more responsive; a higher value (400ms) gives a smoother, more cinematic feel.

Checking the Browser Console

If the video does not appear, press F12 to open browser DevTools and click the Console tab. Any error messages will help identify the issue. Common messages to look for: video error events indicating the video URL is incorrect, or getElementById returning null indicating the CSS ID is not saved correctly.

Mobile Testing

Test the effect on mobile devices. Most mobile browsers support the scroll event, but iOS Safari has some quirks with video autoplay. Make sure your video is muted and has the playsinline attribute (already included in the code) for iOS compatibility.

Common Issues and How to Fix Them

Video Does Not Appear — Only Image Shows

This is almost always a CSS z-index or positioning issue. Check: (1) The HTML widget is inside the #video-bg-section container, not outside it. (2) The CSS ID is correctly saved in Elementor — click the container, go to Advanced → CSS ID, and make sure it shows video-bg-section. (3) There is no conflicting background set in Elementor’s Style tab.

Video URL Appears as Plain Text on Page

This happens when Elementor’s HTML widget is set to Visual mode instead of HTML/Text mode. Click the HTML widget, look for a “Text” or “HTML” tab at the top of the editor, and make sure you are pasting in the raw HTML mode.

Video Plays in Header and Footer

This was caused by using position: fixed on the video element, which makes it cover the entire browser viewport regardless of the container. The corrected code uses position: absolute, which keeps the video strictly inside the container boundaries.

CSS ID Returns Multiple Elements

Elementor sometimes applies your CSS ID to multiple wrapper elements it generates around your container. This is normal — JavaScript’s getElementById returns the first match, which is typically the outermost element. The CSS selector #video-bg-section targets the correct container.

Video Does Not Play on Mobile

iOS Safari requires videos to have both the muted attribute and the playsinline attribute for autoplay to work. Both are included in the code. If the video still does not play on mobile, check that the visitor’s device is not in Low Power Mode, which prevents all video autoplay.

Performance Tips for Video Backgrounds

Compress Your Video Before Uploading

Use HandBrake (free, open-source) to compress your video before uploading to WordPress. Set the codec to H.264, resolution to 1080p, quality to RF 28, and frame rate to 24fps. This can reduce a 50MB video down to under 5MB with minimal visible quality loss.

Use a CDN for Video Delivery

If your website gets significant traffic, consider serving the video through a Content Delivery Network (CDN). Cloudflare, BunnyCDN, and Jetpack VideoPress can dramatically reduce video load times by serving the file from servers closer to each visitor.

Lazy Load the Video

Add preload=”none” instead of preload=”auto” if you want the video to only download when the user begins scrolling. This saves bandwidth for visitors who never scroll to the section. Change it to preload=”auto” if you want the fastest possible playback start when scrolling begins.

Provide a Fallback Image for Mobile

On mobile devices, you may want to disable the scroll video entirely and show only the poster image. Add a CSS media query to hide the video element on small screens, ensuring mobile visitors get a fast, clean experience.

Keep Video Duration Short

For scroll-driven video backgrounds, shorter is better. A 10–20 second video looping with scroll control is ideal. Longer videos increase file size and the time it takes for the browser to buffer enough frames for smooth seeking.

Frequently Asked Questions

Do I need Elementor Pro for scroll video background?

No. This method works with the free version of Elementor. You only need the HTML widget, which is available in the free Elementor plugin. No premium Elementor features are required.

Can I use a YouTube or Vimeo video as the background?

No. This method requires a self-hosted video file (MP4) hosted on your own domain. YouTube and Vimeo videos cannot be used because of browser security restrictions (CORS policy) that prevent JavaScript from accessing their video frames for scroll control.

Will this affect my website loading speed?

The JavaScript code itself is extremely lightweight — just a few kilobytes. The main performance factor is the video file size. A properly compressed MP4 video under 5MB will have minimal impact on page load speed. Use preload=”none” to prevent the video from downloading until the user scrolls.

Does this work on mobile devices?

Yes, it works on most modern mobile browsers. iOS Safari requires the muted and playsinline attributes for autoplay, which are already included in the code. However, some mobile browsers in Low Power Mode may prevent video autoplay entirely.

Can I have multiple scroll video sections on the same page?

Yes, but each section needs a unique CSS ID and the JavaScript code needs to be updated to reference each unique ID separately. You would duplicate the code block for each section with its own unique video and container IDs.

What video format should I use?

MP4 with H.264 codec is the recommended format as it has the broadest browser compatibility. WebM is also supported in most modern browsers and typically offers better compression, but MP4 is the safest choice for maximum compatibility including older browsers.

Why does the video not show and only the image displays?

The most common cause is that the HTML widget is not placed inside the target container, or the CSS ID is not correctly saved in Elementor. Double-check that: (1) the HTML widget is a child element of the #video-bg-section container, (2) the CSS ID field in Elementor’s Advanced tab shows the correct ID, and (3) there is no conflicting background set in Elementor’s Style settings.

Can I add text and buttons on top of the video?

Yes. Add your text, headings, buttons, and other widgets inside the container as normal. The code sets z-index: 3 on Elementor’s inner container wrappers, ensuring all content sits above the video. If any element appears behind the video, increase its z-index in Elementor’s Advanced settings.

Conclusion

Adding an Elementor video background that plays on scroll is one of the most impactful design upgrades you can make to your WordPress website — and as you’ve seen in this guide, it doesn’t require any premium plugins or expensive developers.

With just an HTML widget, a self-hosted MP4 video, and the code provided in this guide, you can create the kind of immersive, scroll-driven experience that was previously only possible on high-budget agency websites. The benefits are real: higher engagement, longer time-on-page, better brand perception, and improved conversion rates.

Whether you want a simple play-on-scroll effect or the full bidirectional reverse playback, this guide has given you everything you need to implement it step by step. Follow the setup carefully — particularly making sure the HTML widget is inside the correct container and the CSS ID is saved properly — and you’ll have a stunning scroll video background running on your Elementor site in under 30 minutes.

If you found this guide helpful, consider sharing it with other Elementor and WordPress users in your community. And if you have questions or run into issues, drop a comment below — we’re happy to help!