JSFiddle - React, Tailwind, and code Playground

HTML

<video autobuffer controls id="myvideo">
    <source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4" />
</video>
<p onclick="toggleControls();">Toggle</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 toggleControls() {
    if (video.hasAttribute("controls")) {
        video.removeAttribute("controls")
    } else {
        video.setAttribute("controls", "controls")
    }
}