<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;
}