Remove Home Page bottom space from Video Background

Shopify Discussion
1

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?

this is how it currently is
this is how it currently is3018×1650 620 KB

this is how i need it to look like
this is how i need it to look like1600×887 112 KB

2

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

3

@malikaclover can you please share store link.

4

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.

5

https://malikaclover.com/

password: CloverMal10

6

here:

https://malikaclover.com/

password: CloverMal10

Thank you!

7

Thank you in advance :slightly_smiling_face:

8

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

}

9

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

10

Hii! thank you for the code i’ve tried it however it did not work :disappointed_face:

11

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