Center background HTML video both Vertical and Horizontal in Smaller Element

<div class="video-container">
    <video loop="" autoplay="" muted="" playsinline="" id="header-video"  src="my-video.mp4" type="video/mp4"></video> 
</div>

Or

<div class="p-rel overflow-hidden vid-container">
    <div class="vid">
        <div class="video-container">
            <video loop="" autoplay="" muted="" playsinline="" id="header-video"  src="myvideo.mp4" type="video/mp4" class="w-100-p"></video> 
        </div>
    </div>
</div>
$(window).resize(function() {
	var v = document.getElementById("header-video");
	var containerwidth=$(".video-container").width();
	var containerheight=$(".video-container").height();
	var width = v.videoWidth;
	var height = v.videoHeight;
	var clipwidth = (width-containerwidth)/2;
	var clipheight = (height-containerheight)/2;
	$("#header-video").css({"left":-clipwidth,"top":-clipheight});

});

var v = document.getElementById("header-video");
v.addEventListener( "loadedmetadata", function (e) {
	var containerwidth=$(".video-container").width();
	var containerheight=$(".video-container").height();
	var width = this.videoWidth;
	var height = this.videoHeight;
	var clipwidth = (width-containerwidth)/2;
	var clipheight = (height-containerheight)/2;
	$("#header-video").css({"left":-clipwidth,"top":-clipheight});

}, false );
.vid{
    position: absolute;
    top: 50%; 
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto;
    z-index: -1000; 
    overflow: hidden;
  }