Adding Mute/Unmute Button on a Video Background [DIVI Theme - WordPress]

Question

I've been trying to add a mute/unmute toggle to a banner video on a website I'm working on that uses the DIVI theme by Elegant Themes. I had it playing without the audio muted but it only worked the first couple of times, then it wouldn't play the video at all. I assume this is because of Google's autoplay policy in Chrome?

Anyway, I've tried the code below to create a Mute/Unmute button but it doesn't seem to work, though it works on other snippets I've tried it on.

Page in question is: http://www.snapperbonanza.co.nz/home-2/

Code is:

jQuery(document).ready(function(){
    jQuery(".et_pb_section_video_bg video").prop('muted', true);

    jQuery("#mute-video").click( function (){
        if( jQuery(".et_pb_section_video_bg video").prop('muted') ) {
            jQuery(".et_pb_section_video_bg video").prop('muted', false);
        } else {
            jQuery(".et_pb_section_video_bg video").prop('muted', true);
        }
    });
});

Any help would be greatly appreciated :)

Answer 1

Two problems:

1. Use window load rather than document ready.
2. I needed to set the volume to 1. It still would not unmute because volume is also set to 0.

In this code I have a font awesome icon toggling for mute/unmute as well:

jQuery(window).load(function() {
    jQuery("video").prop('volume', 1);
    jQuery("#mute-video").click(function () {
        jQuery("video").prop("muted", !jQuery("video").prop("muted"));
        jQuery("#mute-video .fa-volume-mute").toggle();
        jQuery("#mute-video .fa-volume-up").toggle();
    });
});