Video in hero banner with overlay

[BenBro]

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 

[LitCommerce]

Hi @BenBro,

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

[blowerband]

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