Simple Elementor Video Background Sound Button

Fully updated in Aug 2024.

In this tutorial we will be learning about how create a volume on and off button toggle for self hosted video in Elementor.

Note that this method will only work for self hosted video in Elementor, this won't work for Youtube, Vimeo or any other streaming platform videos.

It will work for third party self hosted videos, such as Cloudinary, and preferably, BunnyCDN.

Learn more about self hosting videos with BunnyCDN.

Here is a live example. This is also the template that you should import on your page.

Click the volume icon in the lower right corner.

First, import the Elementor Video Background Volume Button template

Click the download or copy button below the iFrame of the demo, and import this on your page.

Open the Navigator, and you should now have this:

You can add anything else you might want in the background-video-sound-control container.

You can adjust the position of the Toggle by going under Advanced and adjusting the Absolute positioning of the Volume Button Container.

You can switch the icons to any you wish. volume_is_off will be shown when the volume is off, and volume_is_one will be shown when the volume is on.

In the editor both icons are shown on top of each other.

If you adjust the styles of one icon, and copy paste it to the other, keep in mind that you will need to adjust the class names again.

volume_is_off needs the class name volume_is_off

volume_is_on needs the class name volume_is_on

Also be aware that one of the icons needs to be position: absolute.

If you have more than one background video with sound control

The code works for as many background-video-sound-control containers that you would want to have on your page.

However, you need the HTML element to be present only one time in total on your page.

So if you have more than one background-video-sound-control container, be careful to only have the code one time.

Finally, enjoy your Elementor Background Video Sound Toggle!

Alright! Now you know how to create an Elementor play and mute button for self-hosted videos!

Comment below if you need any help!

Important: I completely rewrote this in Aug 2024, so ignore all the comments that come before.