JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
    <video class="child" controls="" autoplay="">
        <source src="http://beginwithsoftware.com/free-hd-720p-1080p-mp4-video-downloads/video/I_LOVE_YOU_H264_720P_23.976_BeginWithSoftware.com.mp4" type="video/mp4">Your browser does not support the video tag.</video>
</div>
    
    
<div class="parent2">
    <video class="child" controls="" autoplay="false">
        <source src="http://beginwithsoftware.com/free-hd-720p-1080p-mp4-video-downloads/video/I_LOVE_YOU_H264_720P_23.976_BeginWithSoftware.com.mp4" type="video/mp4">Your browser does not support the video tag.</video>
</div>

CSS

.parent {
    height:400px;
    width:400px;
    position: relative;
    border:5px solid red;
    overflow:hidden;
}
.parent2 {
    width:1000px;
    height:200px;
    position: relative;
    border:5px solid red;
    overflow:hidden;
}
.child{
  position: absolute;
  min-height: 50%;
  min-width: 50%; 
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}