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