Remove Home Page bottom space from Video Background

[malikaclover]

Hi everyone,

I've been trying for several days now to add two separate background videos to two different pages on shopify.

I have finally managed it however the video on my home page was supposed to cover the entire screen (desktop view) however it has a lot of empty space at the bottom and im unsure on how to remove it?

[malikaclover]

Left image is how it currently looks like and the right is how i need it to be

[Vinsinfo]

Hi,

I couldn't help you using your attached image. Please share your website URL, we can able to understand the spacing issue by seeing how did you implemented video in your site.

[malikaclover]

https://malikaclover.com/

password: CloverMal10

[malikaclover]

Thank you in advance 🙂

[Vinsinfo]

Hello, I shared fixes for your problem. Please let me know whether it is useful for you

[Vinsinfo]

Please follow the instructions to achieve it. Please let us know if you have any queries.

1. Go to "Online Store" -> "Themes".
2. Select Edit code.
3. Go to base.css file and paste below code at the bottom of the file.

#MainContent .shopify-section.videoBackground {

      height: 100%;

}

.videoBackground .videoBox {

      height: 100%;

}

[malikaclover]

Hii! thank you for the code i've tried it however it did not work 😞

[ProtoMan44]

@malikaclover  can you please share store  link.

[malikaclover]

here:

https://malikaclover.com/

password: CloverMal10

Thank you!

[ProtoMan44]

@malikaclover sorry for the late reply.

please add it at the bottom of base.css

div.videoBackground .videoBox {
   height: 100vh !important;
}
div.videoBackground .fullscreen-video-wrap .video-js {
     height: 100% !important;
}

i hope it will work for you.

if your issue is solved, hit like and mark it as the solution, thanks.