CMS Development

Pagenoi
Contributor

Video Header Cutting off Top of Video

SOLVE

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

 

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

 

0 Upvotes
1 Accepted solution
Kevin-C
Solution
Recognized Expert | Partner
Recognized Expert | Partner

Video Header Cutting off Top of Video

SOLVE

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
}
Kevin Cornett - Sr. Solutions Architect @ BridgeRev

View solution in original post

2 Replies 2
Kevin-C
Solution
Recognized Expert | Partner
Recognized Expert | Partner

Video Header Cutting off Top of Video

SOLVE

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
}
Kevin Cornett - Sr. Solutions Architect @ BridgeRev
Pagenoi
Contributor

Video Header Cutting off Top of Video

SOLVE

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