• Video with Unmute Button
  • Next Slide is only an Image
12

Mute/Unmute Button on Videoslides in Full Sliders

All credits goes to Ismael – good job!

find in section.php:
'video_mute' => true,
and set to :
'video_mute' => false,

make a copy of sections.php edit it (see above) – and upload it to your child-theme/shortcodes folder.

acitvate child-theme shortcodes replacement by:

add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);
function avia_include_shortcode_template($paths){
  $template_url = get_stylesheet_directory();
      array_unshift($paths, $template_url.'/shortcodes/');
  return $paths;
}

Here on Full-Width and Fullscreen Slider it is a bit different – because we could have more than one video on the slider. To have no buttons on the Images – Button has to be in li-element itself.

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

Give a custom class to the Full Slider:  mute-button

add_action('wp_footer', 'mute_unmute_video_slide');
function mute_unmute_video_slide(){
?>
<script type="text/javascript">
(function($) {  
    $('.mute-button .avia_video').closest('.avia-slide-wrap').prepend('<div class="custom-mute"></div>');
    $('.mute-button .avia_video').on('av-mediajs-loaded', function() {   
      var video = $(this).mediaelementplayer();
      video[0].setMuted(true);
      $('.avia-slide-wrap').on('click', '.custom-mute', function() {
        if(video[0].muted === true) {
          video[0].setMuted(false);
          video[0].setVolume(0.8);
        } else {
          video[0].setMuted(true);
        }   
      });
    });
    
    $('.avia-slide-wrap').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.5;
}
.icon-sound-on {
	background-image: url('/wp-content/uploads/unmute.png');
}

Here is a solution vor Video-Background on color-sections:   Link