HTML5 Video play-show-hide controls on click
<video id="video" poster="<?= $video->img->url ?>" onclick="this.play()">
<source src="<?= $video->link ?>" type="video/mp4">
Your browser does not support the video tag.
</video>
<script>
var video = document.getElementById('video');
function videoPausePlayHandler(e) {
if (e.type == 'playing') {
video.setAttribute("controls","controls");
} else if (e.type == 'pause') {
video.removeAttribute("controls");
}
}
video.addEventListener('playing', videoPausePlayHandler, false);
video.addEventListener('pause', videoPausePlayHandler, false);
</script>