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.