JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <video id="vid" autoplay>
    <source id="mp4" src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
  </video>
</div>

CSS

div {
  position: relative;
  width: 400px;
  height: 320px;
  box-sizing: border-box;
  border: 3px solid lime;
  margin: 0 auto;
  overflow: hidden;
}

#vid {
  position: relative;
  display: block;
  max-width: 100%;
  max-height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}