Adresse
Webers Webdesign
Ludwig-Schopp-Straße 27
53117 Bonn
Webers Webdesign
Kontakt
Mit dem Laden der Karte akzeptieren Sie die Datenschutzerklärung von Google.
Mehr erfahren
Mute/Unmute Button on Videobackground in Color-Section
All credits goes to Ismael – good job!
upload a copy of sections.php to your child-theme/shortcodes folder !
Activate 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;
}find in that child-theme sections.php the code and replace:
find in section.php:
'video_mute' => true,
and set to :
'video_mute' => false,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