LocationContactPhone
  • StartNEU!
  • Portfolio
  • Kontakt
  • Datenschutz
  • Impressum
  • Click to open the search input field Click to open the search input field Suche
  • Menü Menü

Mute/Unmute Button on Videobackground in Color-Section

All credits goes to Ismael – good job!

The code below will be added to functions.php of your child-theme

Give a custom class to the color-section:  mute-button

add_action('wp_footer', 'mute_unmute_background_video');
function mute_unmute_background_video(){
?>
<script type="text/javascript">
(function($) {  
    $('.mute-button').prepend('<div class="custom-mute"></div>');
    $('.avia_video').on('av-mediajs-loaded', function() { 
      var video = $(this).mediaelementplayer();
      video[0].setMuted(true);
      $('.mute-button').on('click', '.custom-mute', function() {
        if(video[0].muted === true) {
          video[0].setMuted(false);
          video[0].setVolume(0.8);
        } else {
          video[0].setMuted(true);
        }   
      });
    });
    
    $('.mute-button').on('click', '.custom-mute', function() {
      $(this).toggleClass("icon-sound-on");
    });
})(jQuery);
</script>
<?php
}

Upload two buttons ( as you like ) f.e.

and

this comes to quick css

.custom-mute {
    display: block;
    background-image: url('/wp-content/uploads/mute.png');
    background-size: cover;
    width: 120px;
    height: 120px;
    position: absolute;
    bottom: 9%;
    right: 5%;
    z-index: 50;
}
.custom-mute:hover {
	opacity: 0.7;
}
.icon-sound-on {
	background-image: url('/wp-content/uploads/unmute.png');
}

Here is a solution for video-background in sliders: Link

Webers Webdesign

Kontakt

Ruhetag - öffnet am Montag (15.12.) um 08:00 Uhr

Adresse

Webers Webdesign
Ludwig-Schopp-Straße 27
53117 Bonn

Anfahrt

Telefon

+ 49 228 9768293

Anrufen

E-Mail

info@guenterweber.com

E-Mail senden

You are currently viewing a placeholder content from Google Maps. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information
Accept required service and unblock content
© 2025      Website Design by: Webers Webdesign
  • Link zu Facebook Link zu Facebook Link zu Facebook
  • Link zu X Link zu X Link zu X
  • Link zu Instagram Link zu Instagram Link zu Instagram
  • Datenschutzerklärung
  • Impressum
Nach oben scrollen Nach oben scrollen Nach oben scrollen