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:
- 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