Simple Elementor Video Background Sound Button
Get Premium

Simple Elementor Video Background Sound Button

Element.How also offers premium tutorials! Check them here:

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> 
/* Please login to get the code 
 * The code will be for the Simple Elementor Video Background Sound Button tutorial 
 * Found at this URL https://element.how/elementor-video-background-sound-button/ 
 */ 
</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.

<script> 
/* Please login to get the code 
 * The code will be for the Simple Elementor Video Background Sound Button tutorial 
 * Found at this URL https://element.how/elementor-video-background-sound-button/ 
 */ 
</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!

Simple Elementor Video Background Sound Button

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

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

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

112 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?

    2. 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

    4. 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.

    5. 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?

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

    8. 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...

    10. 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!

    2. the same problem i had, it wont play background music it plays only video. But i want audio and video. how can i write code for this ? please help me

    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.

  6. 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.'

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

  8. 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. Hi Maxime, like Walter, I'm also using the pause/play version. For some reason the the icon doesn't toggle on the first click. Since the video is already playing, presumably I should be using a stop button to start with?

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

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

      2. Hey Leon.

        Try with this code, and yes, use a stop button then:

        document.addEventListener('DOMContentLoaded', function () {
        var stopButton = document.querySelector('.fa-stop-circle');
        var heroBackgroundVideo1 = document.querySelector('.herosection video');

        stopButton.addEventListener('click', function (event) {
        if (heroBackgroundVideo1.paused) {
        stopButton.classList.remove('fa-play-circle');
        heroBackgroundVideo1.play();
        } else {
        stopButton.classList.add('fa-play-circle');
        heroBackgroundVideo1.pause();
        }
        });
        });

    2. 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.

  10. 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.

  11. 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!

  12. 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.

  13. 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

  17. 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

  18. 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

  19. 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 ?

  21. Hi Maxine,
    how to add both icons for toggle please, for on and off.
    You have detailed only one icon?

    Also i have got this working , but on the page where it is displayed i cannot get sound to work , im using a firemodal to open the page where the video is, i think is the problem.

    1. Yep sounds like your setup is more complex and would require custom coding to make compatible.

      As for two icons, the code provided should already do that, if you use the specific Font Awesome icon and the related code.

  22. Hello,
    I have done everything that was advised on this tutorial, but it doesn't seem to work at all. When I move the cursor over the icon, the cursor does not even change, indicating that it is even clickable.
    Can someone help me please with this one

  23. Hi Maxime, Thank for this tutorial, it works perfectly with selfhosted video's. But do you know how I get it to work with video's hosted on Vimeo? Since i don't want this video selfhosted due to its size almost 2gb. Thanks in advance!

  27. Hey Maxime Desrosiers, I am wondering if you can help me with my issue.

    The code works properly on desktop and also mobile, however, I want to use another version of the video only for mobile. When I try to duplicate the code and make the query selectors unique, it stops working both desktop and mobile. Can you help me, please?

  28. Hi I Tried that 1 year before it was working but now it says:
    "403 Forbidden, Access to this resource on the server is denied!"
    can you please tell me why.
    Thanks.

  29. Hi Maxime,

    This is exactly what I'm looking for! It's working but unfortunately it creates a picture-in-picture mode and when I click the button it will leave the website. How can i fix this?

    Thanks!

  30. I'm thinking about how to use two svg images for that toggle function instead of using font awesome 🤔what do you think? Any css workaround for that?

    Thanks!

    1. Yes this is possible. In this tutorial I just wanted to keep things as simple as possible, and give a solution that would satisfy most users. You can reach out to me for customization work!

  31. Hi Maxime, thanks for your tutorials, they're great ! Do you know if there is any similar code to unmute/mute all the sounds on the page instead of a single video?

    Thank you in advance

      2. You might be better reaching out to the creator of that addon!

    1. Hey Syed,

      No, not reliably. Sometimes it will play, but for some visitors it won't. It depends on a few things, and it's blocked at the browser / device level for some users, so we don't have control over it.

  36. HEllo Maxime, Thank you so much for your tutorial. but I need a help, I don't want the sound to be off. I want it to start with sound. What should I do then?
    thank you

  38. Hi, I need a different video background for desktop and responsive, so I need it in two sections, but it's not working, can you help me please?

    Thanks!

  39. Hi Maxime, great tutorial thank you!!!

    I'm trying to use this method for volume and play (start and stop) buttons - noticed the code above to do this for the start / stop and that's working great. Is there a way to have the icon change for the start / stop as you have for the volume (mute / unmute)?

    Thanks!

  40. Salut Max 🙂
    Ca fonctionnait très bien et du jour au lendemain le bouton n'a plus marché.
    Je ne comprends pas pourquoi.
    Voici le lien : https://intellia.club/

    J'ai suivi le tuto de A à Z. J'ai tout refait...
    As tu une idée ? J'ai modifié le z index, etc...

    1. Bonjour Arnaud,

      Change cette ligne:

      var playButton = document.querySelector('.fa-play');

      pour

      var playButton = document.querySelector('.e-fas-volume-mute');

      Cheers!

      1. Ah ca ne fonctionne toujours pas :/ J'ai fait plusieurs changements et je me suis perdu. Pour information, je souhaite faire la premiere méthode. Peux tu me dire si ce code est bon ?

        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');
        } }); });

        J'ai un probleme avec l'icone ?

      2. Change

        var toggleSoundButton = document.querySelector('.fa-volume-mute');

        pour

        var toggleSoundButton = document.querySelector('.e-fas-volume-mute');

  41. Merci beaucoup ! Ca fonctionne 🙂
    Dernier point, l'icone ne change pas lorsque je clique dessus.
    J'ai modifié les autres classes avec e.fas-volume-up mais ca ne fonctionne pas.
    Une idée ?

    document.addEventListener('DOMContentLoaded', function() {
    var toggleSoundButton = document.querySelector('.e-fas-volume-mute');
    var heroBackgroundVideo = document.querySelector('.herosection video');
    toggleSoundButton.addEventListener('click', function (event) {

    if (heroBackgroundVideo.muted !== false){
    heroBackgroundVideo.muted=false;
    toggleSoundButton.classList.add('.e-fas-volume-up');
    } else {
    heroBackgroundVideo.muted=true;
    toggleSoundButton.classList.remove('.e-fas-volume-up');
    } }); });

  42. Hi Maxime,

    Thank you for the Tutorial.

    I followed the steps and the play button doesnt work - i did add the Z-Index, in vain...

    Please could you look into it?

    The Hero Section Video comes from Cloudinary.com as itsheavy promo video. In case that is the issue I made a short screen-record and uploaded to the website Media Files. then added to the Section that follows - Still don't work ..

    http://mle.mallorcawebdesign.de/about-us/

    Thank you so much for your help!

    Evita

  43. While usimg youtube url, this code is not working. It gives console errors like : Uncaught TypeError: Cannot read properties of null (reading 'muted')

    1. Yes that's why this tutorial starts with : 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.

      Cheers!

      2. I have a solution for YouTube, I might make a premium tutorial out of it if you are interested.

        (premium because it was significantly more work to get working)

  44. Hi, Maxime,

    Thank you a lot for this Tutorial, it helps me a lot, but when I use the code:

    .toggle_sound{
    cursor: pointer;
    }

    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;
    } });
    });
    });

    for two sections to play the music, the icon cannot change from volume mute to volume up. It displays volume mute all the time. How can I do with this, please?

    Best regards,
    Tao

  45. It was working for me fine until recently, it was not working so for some reason the favicon class was changed and worked after I replaced "fa-volume-mute" to "e-fas-volume-mute" ,

    Wanted to help if that happening for others too.

  47. Hello everyone, I was faced with the same problem that the code suddenly stopped working when using it on new websites. I tried everything, also changed "fa-volume-mute" to "e-fas-volume-mute" - this helped with the sound but did not toggle to the other icon.

    I have now found the reason and would like to share my results with you:

    In the Elementor properties you could find different performance optimizations. You have to change the first option "Inline font icons" to inactive. It is set to default by default, which seems to make it active and renders the icons as SVGs. After switching this option to inactive, everything works as usual and as shown in the tutorial.

    I hope this helps you.

    Best
    Anne

  51. Bonjour désolé pour le double post, j'ai réussi grâce au bouton mais lorsque je clique dessus ça me renvoie au haut de ma page, avez vous une solution ?

Leave a Reply

Simple Elementor Video Background Sound Button

Resources

Premium

Account

Discounts

Facebook Youtube Envelope

© Copyright 2024 Element How
Privacy Policy | Terms & Conditions