Simple Elementor Video Background Sound Button

Table of Contents

In this article we will be learning about how create a play and mute  button 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.

Follow the steps mentioned below to create a play & mute button for self hosted video background.

Simple Elementor Video Background Sound Button 1

Create a new Elementor section

Click on the "+" icon in an empty section of the page and choose a desired section structure.

Simple Elementor Video Background Sound Button 2

Add class name to the Elementor section

elementor-play-and-mute-button

  1. Click on the edit section icon to open the toolbar to the right for editing the section.
  2. Go to the "Advanced" tab.
  3. Under the "Advanced" dropdown add the class "herosection". The class name can be anything of your choice but it should match the class name for the corresponding section in the JavaScript code below.

Add the self hosted video to the section background

Simple Elementor Video Background Sound Button 3

  1. Go to the Style tab of the edit section toolbox.
  2. Choose the Video option from the Background Type attribute.
  3. Paste/Type the link for your video.

Add an Elementor Font Awesome Mute Icon

To your Elementor hero section with a background video.

Simple Elementor Video Background Sound Button 4

Go in the settings, and choose that exact icon. It will be the background video sound button.

Simple Elementor Video Background Sound Button 5

You will probably want to set the section content to full-width, and column position to 'Stretch'. This will help in positioning the icon.

Simple Elementor Video Background Sound Button 6

Then, use absolute positioning on the icon, to place it exactly where you want. Under Advanced > Positioning, set Width to Inline(auto) and (for example), use these settings to place the icon in the lower right corner of the hero section.

Simple Elementor Video Background Sound Button 7

Add the code to an HTML element

Simple Elementor Video Background Sound Button 8

Drag and drop a HTML element to the Elementor page. Copy and paste the HTML code below to the HTML element.

<script>
document.addEventListener('DOMContentLoaded', function() {
var toggleSoundButton = document.querySelector('.fa-volume-mute');
var heroBackgroundVideo = document.querySelector('.herosection video');
toggleSoundButton.addEventListener('click', function (event) {

if (heroBackgroundVideo.muted !== false){
heroBackgroundVideo.muted=false;
toggleSoundButton.classList.add('fa-volume-up');
} else {
heroBackgroundVideo.muted=true;
toggleSoundButton.classList.remove('fa-volume-up');
} }); });
</script>

Only if you prefer an actual button, follow these instructions, and use the code below instead.

Add an Elementor button instead of the icon

Simple Elementor Video Background Sound Button 9

Drag and drop a button element to a section in the page from the Elementor widget box.

Simple Elementor Video Background Sound Button 10

  1. Right click on the button and click on the Edit button option in the drop down.
  2. Go to the Content tab in the Edit Button properties.
  3. Clear the link text box of all text.

Simple Elementor Video Background Sound Button 11

  1. Go to the Advanced tab and open the Advanced drop down.
  2. Type in the name "toggle_sound" for the CSS Classes attribute.

Add this code to an HTML element

Simple Elementor Video Background Sound Button 8

Drag and drop a HTML element to the Elementor page. Copy and paste the HTML code below to the HTML element.

   

<style>
.toggle_sound{
        cursor: pointer;
}
</style>
<script>

document.addEventListener('DOMContentLoaded', function() {

var toggleSoundButton = document.querySelector('.toggle_sound');
var heroBackgroundVideo = document.querySelector('.herosection video');
toggleSoundButton.addEventListener('click', function (event) {

if (heroBackgroundVideo.muted !== false){
heroBackgroundVideo.muted=false;
} else {
heroBackgroundVideo.muted=true;
} }); });

</script>

Conclusion

Alright! Now you know how to create an Elementor play and mute button for self-hosted videos! Comment below if you need any help!

Share:

Share on facebook
Share on twitter
Share on linkedin
Comments