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="">
        <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;
        height:1px;
        min-height: 100%;
        width:10000px;
        min-width: 100%; 
        cmax-width: 100%; 
        /* width: 100%; */
        /* height: 100%; */
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        
}