JSFiddle - React, Tailwind, and code Playground
HTML
<video autobuffer autoplay id="myvideo">
<source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4" />
</video>
<p onclick="mute(this);">Mute</p>
CSS
html {
padding: 20px 0;
background-color: #efefef;
}
body {
width: 400px;
padding: 40px;
margin: 0 auto;
background: #fff;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}
video {
width: 400px;
display: block;
}
JavaScript
var video = document.getElementById("myvideo");
function mute(btn) {
var muted = video.muted;
btn.innerHTML = muted ? 'Mute' : 'un Mute';
video.muted = !muted;
}