Elementor Background Video Changes on Container Hover

Elementor Background Video Changes on Container Hover

Just launched! Checkout the CSS Course for Elementor users.

Table of Contents

With this tutorial and template file, you will be able to make an Elementor background video change on hover of the inner containers.

Because it requires hovering, it works on desktop only.

See it in action here:

Visit the demo page directly.

Elementor Background Video Changes on Container Hover 1


  • Works for all video sources (YouTube, Vimeo, Self Hosted)
  • Made with the new Containers (lightweight structure)
  • Design your hero content however you wish (any and all element can be added, it will still work)
  • Smooth transition between videos
  • CSS only design
  • Desktop only

Important note: You will need the feature "Container" to be enabled under Elementor > Experiments > Container. This uses the new Container element.

It can be done with the old sections and inner sections, however it makes it very DOM heavy. So I waited until the new container was out to publish this one.

Let's get started!

First, import the Elementor Background Video Changes on Hover template

This is a premium tutorial. Purchase access to unlock the full tutorial. You will also get the downloadable template file


Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2445 Elements right here:

Checkout the Elementor Addon Finder directly


Leave a Reply