Remove Home Page bottom space from Video Background

malikaclover
Tourist
20 0 2

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?

 

Screen Shot 2024-02-02 at 1.30.32 PM.pngaf2f5e32-4f33-40c8-932a-92a0d9cb6853 2.jpg

Replies 10 (10)

malikaclover
Tourist
20 0 2

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

priyavinsinfo
Shopify Partner
51 15 15

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
Tourist
20 0 2

https://malikaclover.com/

 

password: CloverMal10

malikaclover
Tourist
20 0 2

Thank you in advance 🙂

priyavinsinfo
Shopify Partner
51 15 15

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

priyavinsinfo
Shopify Partner
51 15 15

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
Tourist
20 0 2

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

ProtoMan44
Shopify Partner
146 13 23

@malikaclover  can you please share store  link.

- A thirsty developer passionate about supporting the community. If you'd like to, you can buy me a

Coffee

.
- Your Shopify Solution Specialist Get a Quote at Dev444- Whatsapp +92-3046185085
Crafting exceptional e-commerce experiences to elevate your online presence. Let's build your success story together!
malikaclover
Tourist
20 0 2

here:

 

https://malikaclover.com/

 

password: CloverMal10

 

Thank you!

ProtoMan44
Shopify Partner
146 13 23

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

- A thirsty developer passionate about supporting the community. If you'd like to, you can buy me a

Coffee

.
- Your Shopify Solution Specialist Get a Quote at Dev444- Whatsapp +92-3046185085
Crafting exceptional e-commerce experiences to elevate your online presence. Let's build your success story together!