White margin around background video

[JPham]

Hey

I have this background video on my website, but when it is in phone mode, there are white margins above and under the background video. 

I guess this can be fixed through the CSS code. I made a custom section called video-background.liquid

<style>
.main-content .videoBackground {
margin-top: -80px;
max-height: 100%;
height: 100%;
}
.videoBackground {

position: relative;
max-height: 100%;
height: 100%;
}
.videoBackground .fullscreen-video-wrap {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
width: 100%;
max-height: 100%;
height: 100%;
overflow: hidden;
}
.videoBackground .fullscreen-video-wrap .video-js {
position: absolute;
max-height: 100%!important;
height: 100%!important;
max-width: 160%!important;
width: 160%!important;
object-fit: flex;

}
.videoBackground .fullscreen-video-wrap video {
min-height: 100%;
min-width: -100%;
object-fit: absolute;
}
.videoBackground .videoBox {
display: flex;
align-items: flex;
justify-content: flex-end;
flex-direction: column;
padding: 100px 20px 80px;
background-size: flex;
background-position: flex;
background-repeat: no-repeat;
min-height: 500px;
max-height: 800px;
height: calc(100vh - 165px);
position: relative;
}
.videoBackground .imageBox {
display: flex;
align-items: center;
justify-content: flex-end;
flex-direction: column;
padding: 100px 20px 80px;
background-size: flex;
background-position: center;
background-repeat: no-repeat;
position: relative;
min-height: calc(100vh - 165px);
height: auto;
}
.videoBackground .videoBoxInfo, .videoBackground .imageBoxInfo {
z-index: 2;
text-align: center;
}
.videoBackground .overlay {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #000;
z-index: 1;
}
.videoBackground .videoBoxInfoBtn, .videoBackground .imageBoxInfoBtn {
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
width: auto;
text-decoration: none;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 2px;
padding: 8px 15px;
font-style: normal;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
white-space: normal;
font-size: 14px;
margin-top: 50px;
}
.videoBackground .videoBoxInfoTitle, .videoBackground .imageBoxInfoTitle {
color: #00000;
font-size: 30px;
line-height: 40px;
}
.videoBackground .videoBoxInfoDescription, .videoBackground .imageBoxInfoDescription {
max-width: 1000px;
margin: 135px!important;
text-align: left!important;
}
.videoBackground .videoBoxInfoDescription p, .videoBackground .imageBoxInfoDescription p {
font-size: 95px;
line-height: 150px;
text-align: down!important;
margin: -40px!important;
}
.videoBackground .placeholderNoblocks {
text-align: center;
max-width: 1000px;
margin: 0 auto;

}
@media screen and (max-width: 100%) {

.main-content .videoBackground {

margin-top: -35px;

}

.videoBackground .fullscreen-video-wrap {

z-index: 3;

}

.videoBackground .videoBox {

min-height: 500px;

height: 100%;

position: relative;

padding: 0;

}

.videoBackground .fullscreen-video-wrap {

position: relative;

min-height: 300px;

}

.videoBackground .videoBoxInfo {

padding: 40px 20px;

background: #000;

width: 100%;

}

}

</style>

@ZestardTech 

@oscprofessional 

 

[GemPages]

Hello @JPham ,

It's GemPages support team and glad to support you today.

Could you please share your store URL ( with the password if your store password is enabled ) then I can see and suggest something for you?

Best regards,
GemPages Support Team

[JPham]

https://plugmeluxury.com/ 

Try this URL 🙂

[GemPages · Accepted solution]

Hello @JPham ,

I would like to give you the recommendation to support you.

Let's find the code line named .videoBackground .videoBox, after that, change the value of height to auto:

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team

[oscprofessional · Accepted solution]

@JPham 
Hello,

@media screen and (max-width: 600px) {
.videoBackground .videoBox {
	height: auto;
}
}

Add this CSS at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

Like This

or

@media screen and (max-width: 600px) {
.videoBackground .videoBox {
  height: auto;
  min-height: auto !important;
}
}

Add this CSS at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

Like This

[JPham]

Thanks, it worked! But now i have a similar problem. If you look at the same URL, i tried adding a title text and i am having trouble to shrink/minimize it to fit in the phone screen as well. 

CSS:

.videoBackground .videoBoxInfoTitle, .videoBackground .imageBoxInfoTitle {
color: #00000;
font-size: 60px;
width: 800px;
line-height: 100px;
min-height: 200px;
height: 300px;
text-align: right!important;

[oscprofessional]

@JPham 
Hello, 

h1.videoBoxInfoTitle {
    font-size: 34px;
    width: 70% !important;
    line-height: 50px !important;
}

Add this CSS at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

Like This