» Center background HTML video both Vertical and Horizontal in Smaller Element

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>

</div>

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

</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 );

$(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});

// optional $(".vid-container").css({"height":containerwidth/2.3});

});

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

// optional $(".vid-container").css({"height":containerwidth/2.3});

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

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

}

Go Back

Center background HTML video both Vertical and Horizontal in Smaller Element

Thank You!

We will get back to you shortly