All things Shopify and commerce
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?
Left image is how it currently looks like and the right is how i need it to be
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.
Thank you in advance 🙂
Hello, I shared fixes for your problem. Please let me know whether it is useful for you
Please follow the instructions to achieve it. Please let us know if you have any queries.
#MainContent .shopify-section.videoBackground {
height: 100%;
}
.videoBackground .videoBox {
height: 100%;
}
Hii! thank you for the code i've tried it however it did not work 😞
@malikaclover can you please share store link.
@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.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025