JSFiddle - React, Tailwind, and code Playground

HTML

<video id="video" preload="auto" loop="loop" autoplay="autoplay" poster="http://media.w3.org/2010/05/sintel/poster.png">
    <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4" />
    <source src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm" />
    Your browser sucks.
</video>

CSS

*{
    margin: 0px;
    padding: 0px;
}
            
html, body{
    width: 100%;
    height: 100%;
    min-height: 100%;
}
            
#video{
    border: none;
    width: 100%;
    height: 100%;
    display: block;
}

JavaScript

$("#video").on('play',function(){
    if (this.getAttribute('controls') !== 'true') {
        this.setAttribute('controls', 'true');                    
    }
    this.removeAttribute('controls');
});