To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more

Video in hero banner with overlay

New Member
1 0 0

Hi there,


I am looking to create a hero banner that loops video for my brooklyn theme - I am trying to make this display with zero padding [hugging against the top of the webpage, and zero padding on the bottom]. Ideally, I would like to make this element responsive so that I can have one version that displays only on DT, a one that displays on mobile [so that I can export 2 different aspect ratio videos for better experience].


I have followed a guide to install this within my sections folder in the code, but I am getting a large white box above the video when adjusting position to the top of the page [page order]. I have found the code in chrome upon inspect as to why it is doing this, and when I uncheck this, you can see that the positioning corrects itself, but can't figure out where to adjust this in the liquid/ source:


.index-sections .shopify-section:first-child:not(.shopify-section--full-width) {
    margin-top: 110px;

If anyone has any experience on fixing this, as well as a set of rules to create a breakpoint on a section to hide on mobile/ desktop, it would be much appreciated!


Other resources:

Code that was used to create section 

Screen Shot 2022-03-18 at 9.59.44 AM.png

Replies 2 (2)
2822 669 652

Hi @BenBro,

Please send your site and if your site is password protected, please send me the password. I will check it.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
10 0 1

You site is great!  How did you end up getting such a fast loading hero video to play?  if you dont mind sharing?