Video Header Cutting off Top of Video

Developer Support CMS Development
1

I am working with a new template that has a responsive video header looped in the background but I cannot seem to get the video to adjust so that the bottom is what is being cropped and not people’s heads. I have tried adjusting the css but have been unable to correct the problem.

The demo page is here: https://www.realmanage.com/-temporary-slug-688882bd-c465-4b09-8b53-60d75f9662ae?hs_preview=lTQSXmfg-40722572620

The module has it’s own CSS which can be seen below:

.video-bg .video-object {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 overflow: hidden;
 z-index: -1;
}
.video-bg {
 position: relative;
 z-index: 1;
 background-position: center center !important;
 background-repeat: no-repeat !important;
 background-size: cover !important;
 background-attachment: scroll !important;
}
.video-bg .video-object video {
 width: auto;
 height: auto;
 max-width: none;
 min-width: 100%;
 min-height: 100%;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 overflow: hidden;
}
.video-bg.hero-section:before {
 z-index: 0;
 background-color: #5b6a81;
 opacity: 0.7;
}
.video-bg.hero-section .span12.widget-span.widget-type-rich_text{
 position:relative;
}

.topSection-addon-bottom {
 /* background-image: url(https://prospectdirect.com/wpstagemct/wp-content/uploads/2018/08/inner-footer-curve.svg);*/
 background-image: url(https://f.hubspotusercontent20.net/hubfs/1849073/notch-1-1.png);
 z-index: 0;
 top: auto;
 left: 0;
 bottom: -1px;
 right: 0;
 width: 100vw;
 background-size: contain;
 background-repeat: no-repeat;
 background-position: bottom;
 position: absolute;
 height: 50%;
}
.video-bg-page .video-bg .wrapper{
 position: relative;
 z-index: 2;
}
body.blog .video-bg.hero-section:before{
 z-index: 0;
}
.lpvideo2 .video-bg.hero-section .row-fluid a.cta_button{
 background: transparent !important;
 border:2px solid #fff !Important;
 padding: 15px 25px !Important;
}
.lpvideo2 .video-bg.hero-section .row-fluid a.cta_button:hover{
 color: #fff !Important;
}
body.blog .blog-none-editable, body.blog .blog-editable{position: relative;}
@media (max-width: 1500px) {
 .fullscreen-bg__video {
 top: -230px;
}
}
2

Hey @Pagenoi

Try adjusting the top property of the video tag to 100%.

.video-bg .video-object video {
 width:auto;
 height:auto;
 max-width:none;
 min-width:100%;
 min-height:100%;
 position:absolute;
 top:100%;
 left:50%;
 transform:translate(-50%,-50%);
 overflow:hidden
}
3

Kevin - Thank you so much!
As you were replying I changed it to 95% and it worked dead on.