How to Add a Sound Button for Elementor Video Backgrounds: Step-by-Step Guide.

				
					<style>
  .toggleSwitch {
    width: 35px;
    height: 35px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border-radius: 50%;
    border: 1.5px solid rgb(120, 113, 101);
    cursor: pointer;
    transition-duration: .3s;
    box-shadow: none;
    overflow: hidden;
  }
  #checkboxInput {
    display: none;
  }
  .speaker-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .speaker-base,
  .speaker-with-volume {
    position: absolute;
    width: 18px;
    height: 18px;
    transition: opacity 0.3s ease;
  }
  .speaker-base {
    opacity: 1;
  }
  .speaker-with-volume {
    opacity: 0;
  }
  #checkboxInput:checked + .toggleSwitch .speaker-base {
    opacity: 0;
  }
  #checkboxInput:checked + .toggleSwitch .speaker-with-volume {
    opacity: 1;
  }
  #checkboxInput:active + .toggleSwitch {
    transform: scale(0.7);
  }
  #checkboxInput:hover + .toggleSwitch {
    background-color: transparent;
    border-color: rgb(94, 84, 79);
  }
</style>

<!-- 🔘 Toggle Switch -->
<input type="checkbox" id="checkboxInput">
<label for="checkboxInput" class="toggleSwitch">
  <div class="speaker-container">
    <!-- Muted state: only speaker -->
    <div class="speaker-base">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75 75">
        <path d="M39.389,13.769 L22.235,28.606 L6,28.606 L6,47.699 L21.989,47.699 L39.389,62.75 L39.389,13.769z" 
              style="stroke:rgb(120,113,101);stroke-width:5;stroke-linejoin:round;fill:rgb(120,113,101);">
        </path>
      </svg>
    </div>
    
    <!-- Unmuted state: speaker with volume bars -->
    <div class="speaker-with-volume">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75 75">
        <path d="M39.389,13.769 L22.235,28.606 L6,28.606 L6,47.699 L21.989,47.699 L39.389,62.75 L39.389,13.769z" 
              style="stroke:rgb(120,113,101);stroke-width:5;stroke-linejoin:round;fill:rgb(120,113,101);">
        </path>
        <path d="M48,27.6a19.5,19.5 0 0 1 0,21.4
                 M55.1,20.5a30,30 0 0 1 0,35.6
                 M61.6,14a38.8,38.8 0 0 1 0,48.6" 
              style="fill:none;stroke:rgb(120,113,101);stroke-width:5;stroke-linecap:round">
        </path>
      </svg>
    </div>
  </div>
</label>

<!-- ⚙️ Script -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const checkbox = document.getElementById('checkboxInput');
    const video = document.querySelector('.sectionvideo video');
    
    if (checkbox && video) {
      // Initial state: muted
      video.muted = true;
      
      checkbox.addEventListener('change', function() {
        video.muted = !this.checked;
      });
    }
  });
</script>