Adding button to mute/unmute audio on fullscreen background video

https://kriesi.at/support/topic/adding-audio-option-on-fullscreen-backgroundvideo/
This topic is unavailable((
So, any ideas how can I do this like here:
http://www.virginlimitededition.com/en/necker-island
Thank you in advance.

Thank you for answer, Basilis!
I checked this topic.

https://jsfiddle.net/6cc9mhbb/23/?utm_source=website&utm_medium=embed&utm_campaign=6cc9mhbb

Please, could you help me, how can I use this construction for background video in color section?

1.
Code block inside color section with background video:
<button class=”mute-video”>toggle</button>
<script charset=”utf-8″ type=”text/javascript” src=”my site/video.js”></script>

2.
custom.css:
.mute-video {
background:url(http://cdn.flaticon.com/png/64/60750.png) no-repeat center;
background-size:32px;
border:0;
width:32px;
height:32px;
text-indent:-999px;
}
.unmute-video {
background:url(http://cdn.flaticon.com/png/64/498.png) no-repeat center;
background-size:32px;
}

3.
video.js:
$(“video”).prop(‘unmuted’, true);

$(“.mute-video”).click(function () {
if ($(“video”).prop(‘muted’)) {
$(“video”).prop(‘muted’, false);
$(this).addClass(‘unmute-video’);

} else {
$(“video”).prop(‘muted’, true);
$(this).removeClass(‘unmute-video’);
}
console.log($(“video”).prop(‘muted’))
});

But this construction doesn’t work (like example in jsfiddle.net) for background video in color section.

Thank you, Ismael.
The topic ‘Adding audio option on fullscreen background video?’ is closed to new replies.
So I’m writing here.

I add this in the functions.php file:

add_action('wp_footer', 'ava_custom_script');
function ava_custom_script(){
	?>
	<script type="text/javascript">
	(function($) {

		$('.av-section-color-overlay-wrap').on('click', '.custom-mute', function() {
				$(this).toggleClass("icon-sound-on");
				
				
			});
		

		function a() {
			$('.av-section-color-overlay-wrap').prepend('<div class="custom-mute"></div>');
			$('.av-section-color-overlay-wrap').on('click', '.custom-mute', function() {
				$('#top .mejs-controls .mejs-volume-button button').trigger('click');

			});
		}

		a();
	})(jQuery);
	</script>
	<?php
}

And this to custom.css:

.custom-mute {
	display: block;
	background-image: url('my site/unmute.png');
	background-size: 48px;
	width: 48px;
	height: 48px;
	position: absolute;
	bottom: 50px;
	right: 10px;
	z-index: 1000;
}
.custom-mute:hover {
	opacity: 0.5;
}

.icon-sound-on {
	background-image: url('my site/mute.png');
}

@media only screen and (max-width: 1290px) {
.custom-mute {
	right: 190px;
}
}

But this code doesn’t work((
I can press the button and it changes, but there is no sound in background video((
Look Private Content, please.

Thank you, Ismael.
Hm… Do you have any ideas how it works with youtube video?
Because I have no direct mp4 video.

Thak you, Ismael.