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 12

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!

Comments

51 Responses

  1. this works on destop version but lets say i add a different video for mobile version and hide the other video on mobile version and follow the same steps it dosent work on mobile.Any suggestions?

    1. Maxime Desrosiers

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

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

      var toggleSoundButton1 = document.querySelector('.toggle_sound');
      var heroBackgroundVideo1 = document.querySelector('.herosection1 video');
      toggleSoundButton1.addEventListener('click', function (event) {

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

      </script>

      Do you mean this .Its still not working on mobile i have defined new class for mobile vide ,i.e herosection1

    2. Maxime Desrosiers Hi Maxine, I'm having the same issue with this. I a duplicate of the section for mobile video only.

      The mobile button doesn't work but the desktop button will play both if both videos are on display.

    3. Maxime Desrosiers
      Hi, Thank you for this script! Works perfectly for the desktop version, so easy - helped me a lot.
      But, as for the others here, I can't seem to get it to work on mobile. Could you assist please?

    4. Maxime Desrosiers I created the mobile version in a separate section. I gave it a different class and updated in the code. It's the same self-hosted mp4 file video.

    5. Roni Margolin Then there probably is still some conflict with both codes... they would need to be made unique from each other for this to work on two sections without problems...

    6. Kayleigh Roelofs Replace all of your code with this, it should make it work! Note that both hero sections will need the class 'herosection'.

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

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

      let toggleSoundButton = document.querySelectorAll('.toggle_sound');
      let heroBackgroundVideo = document.querySelectorAll('.herosection video');

      toggleSoundButton.forEach((e,i) => {

      e.addEventListener('click', function () {
      if (heroBackgroundVideo[i].muted !== false){
      heroBackgroundVideo[i].muted=false;
      } else {
      heroBackgroundVideo[i].muted=true;
      } });
      });
      });

      </script>

      1. Hey thank you for the update!
        It is unfortunately still not working on mobile.
        And actually when I use this code option it doesn't work on desktop either.
        How weird is that??
        Webpage is framed.berlin
        Your help is much appreciated!

  2. how can i auto play it like when page is loaded then background music will play and if someone wants to mute then we will click on button please edit this code for me and thanks a lot bro.

    1. Not a good idea for UX. Most browser won't support this either. Better give them the option to choose to have sound. Add a clear arrow pointing to your volume button, to give them an incentive to switch it on!

    1. Indeed, on mobile, this won't work reliably, because video autoplay doesn't. You would be better to just use a normal background image for there... Safari , for example, won't autoplay any video on mobile.

    2. Hey Maxime Desrosiers!

      I have iOS mobile Safari and autoplay bg videos play perfectly fine for me on my iphone (via Elementor) - as long as there is no audio. This is the case with other browsers (eg Chrome) bg videos play fine as long as they don't have any audio - since it's the autoplay audio that is being diabled - not the autoplay visual. My only issue is that my video has no sound but I'm seeing a native 'tap to unmute' button appearing (I assume from Vimeo as that is what I am using). Any ideas on how to disable this?

    3. Lee Mason I'm not certain about this... also, you will find that even muted videos will not always autoplay on iOS. Go in your phone's settings , turn on power saver mode (or whatever it is called), then go on the page with your muted video again... it won't play.

  3. As I wrote at the beginning of the article , '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.'

  4. Hi Maxime, the code works very well, appreciate it.

    However, the sounds of the original video will still playing automatically.

    So when i click the mute icon to unmute, it have double sounds.

    How can i autoplay only one sound, and if people would like to unmute it then there they can click the icon to mute it.?

    http://www.joicstan.com

    1. Usually, videos won't autoplay with sound... and it's not great UX either.

      I recommend you set all videos to mute by default, so that when an user click to unmute the video, only that sounds will play.

  5. Hi! Thanks for the tutorial! Very useful!!!

    I Try to do the same thing with an icon Play/Stop but it works only for play and doesn't stop 🙁
    Can you help me?

    <script> //play stop
    document.addEventListener('DOMContentLoaded', function()
    {
    var playButton = document.querySelector('.fa-play');
    var heroBackgroundVideo1 = document.querySelector('.herosection video');

    playButton.addEventListener('click', function (event)
    {
    if (heroBackgroundVideo1.paused !== false){
    heroBackgroundVideo1.paused=false;
    playButton.classList.add('fa-stop');
    heroBackgroundVideo1.play();
    } else {
    heroBackgroundVideo1.paused=true;
    toggleSoundButton.classList.remove('fa-stop');
    heroBackgroundVideo1.stop();
    }
    }); });
    </script>

    1. Hey Walter!

      Change

      heroBackgroundVideo1.stop();

      to

      heroBackgroundVideo1.pause();

      You also have some useless code in there... Use this:

      <script>
      document.addEventListener('DOMContentLoaded', function()
      {
      var playButton = document.querySelector('.fa-play');
      var heroBackgroundVideo1 = document.querySelector('.herosection video');

      playButton.addEventListener('click', function (event)
      {
      if (heroBackgroundVideo1.paused){
      playButton.classList.add('fa-stop');
      heroBackgroundVideo1.play();
      } else {
      toggleSoundButton.classList.remove('fa-stop');
      heroBackgroundVideo1.pause();
      }
      }); });
      </script>

    1. More seriously, you can't start with volume on as it is blocked at the browser level, because it is considered poor UX. The user has to explicitly interact with the page to allow for sound.

  6. Can this code be added to a popup on the same page as the video? I'd like the popup 'click to enter' button to trigger the audio from the background video already playing on the front page.

    1. That might work yes... Might require some debugging and a precise setup to work well and reliably though. Send me a message if you would like pro help with this.

  7. Thanks a lot for this solution!

    Have you ever encountered a picture-in-picture video view? When viewing the page through Firefox (from a computer) and the iphone browser, a context menu appears that allows to view the video in a separate window (“picture in picture”).

    This feature destroys the whole idea if i were thinking of a video page design with complementary elements on top of the video. If you click on the picture-in-picture context menu, the video from the Elementor section disappears, leaving the entire section empty. I do not want the user to be able to do this on the video page (accidentally or intentionally).

    I found some ideas on how to disable this, but I lack technical knowledge on how to integrate these guidelines (https://w3c.github.io/picture-in-picture/#disable-pip, https://developer.apple.com/.../avpictureinpicturecontroller).

    If you have come across this before, or have an idea, please write to me.

    Thank!

  8. it works fine on my website, Thank you
    I display the popup first before going to the video sound window. Can I add the code so that the button will autoclick after the popup opens?

    1. If there hasn't been a click from the user yet, no, that won't work. It will be blocked by the browser.

      If user needs to click something, then maybe it would work.. would need to code it in.

  9. Hello, this works on a normal page, but doesn't seem to work in a popup. Would you have any idea how I can make that happen? Thanks!

    1. Hello Elien! Try the code below instead, let me know if it works!

      <script>
      document.addEventListener('DOMContentLoaded', function() {
      jQuery( document ).on( 'elementor/popup/show', () => {
      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>

    2. Hi Maxime Desrosiers, It works when I preview the popup separately, but not on the page where the popup is displayed. This page, where the popup is displayed, also has a video in it, and I think that might be causing a conflict...

    1. Try this, let me know if it works!

      <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');
      heroBackgroundVideo.currentTime = 0;
      } else {
      heroBackgroundVideo.muted=true;
      toggleSoundButton.classList.remove('fa-volume-up');
      } }); });
      </script>

    2. Maxime Desrosiers i am following the steps and i cant seem to get sound. tried the volume icon and the button and no sound on either

  10. Hi, Maxime!
    Your code is working perfectly but I have some issues. I have a hero section with a video and an image over the video with a link to an anchor link to another section on the page. When I click on that image, that link is not working.
    I think this is related to the event listener but I do not know how to solve it.
    Thanks

  11. Hi Maxime!

    I know you don't recommend audio playing by default, but that's what I'm trying to do (along with several others it looks like). Can you provide a solution to enable audio by default? I understand the UX is not ideal for most situations, and the browser may block it by default (but this is not always the case) so it would be nice to have the option.

    Thanks,
    Mike

  12. Hello, What i need to do is that the video is self hosted on elementor section .. and its autoplaying and sound is off ... I need to turn the sound on as the user hover that video section ? can this be done ?

Leave a Reply