JSFiddle - React, Tailwind, and code Playground

by Vitorino fernandes

HTML

<video id="myVideo" width="320" height="176" controls>
    <source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
        <source src="http://www.w3schools.com/tags/mov_bbb.ogg" type="video/ogg">Your browser does not support HTML5 video.</video>
<button class="mute-video">toggle</button>

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;
}

JavaScript

$("video").prop('muted', 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'))
});