Video mute/unmute with jQuery

Question

I'd like to make a mute/unmute button in jQuery. I've done some searching on Stackoverflow and this is what I managed to do so far:

$("video").prop('muted', true);

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

    else {
    $("video").prop('muted', true);
    }

});

but for some reason it's only able to unmute, not to mute back.

Any idea what's wrong with the code?

Answer 1

When you're doing if( $("video").prop('muted', true) ) you're both setting the property to true and then ask if it's true.

Changing the condition to if( $("video").prop('muted') ) solves the problem - Here's an example.

Also note this will work on all videos on a page so if you have more than one player it might get confusing.