JSFiddle - React, Tailwind, and code Playground

HTML

<!--the "poster" is a transparent GIF. You could include it as a data URI to save one HTTP request--> 
<video controls width="100%" height="100%"  poster="https://i.stack.imgur.com/PdlGo.gif" style="background:transparent no-repeat url('http://www.wpclipart.com/blanks/buttons/glossy_buttons/glossy_button_blank_orange_rectangle.png');">
                <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
                <source src="https://dl5.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm" />
            </video>

CSS

video{
   
    border:1px solid red;
    
    background-size: 100% 100%;
}