JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Hiding HTML5 Video Controls using CSS Pseudo selectors -->

<video width="800" autoplay controls="false">
  <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>

CSS

video::-webkit-media-controls {
  display: none;
}


/*
video::-webkit-media-controls-play-button {

}
video::-webkit-media-controls-volume-slider {

}
video::-webkit-media-controls-mute-button {

}
video::-webkit-media-controls-timeline {
}
video::-webkit-media-controls-current-time-display{}
*/

JavaScript

//For Firefox we have to handle it in JavaScript 
var vids = $("video"); 
$.each(vids, function(){
       this.controls = false; 
}); 
//Loop though all Video tags and set Controls as false