How to remove black bars above and below the front page auto play video on Squarespace 7.0?

Really loving the ability to have an autoplay video as the front page of the website.

Though, there are black bars above and below the video when in mobile mode. The video plays fine but these black bars are messing with the logo, etc. It's like there is some padding, spacing, or formatting problem.

On tablet and desktop it looks amazing and there are no black bars.

How can these bars be removed?

This is using a Vimeo video. 1920 x 1080. Link: https://vimeo.com/789530662 

If I use the link only it does not autoplay.

Here is the embed code:

<!-- Code for Vimeo auto play v1.1 -->

<div style="padding:56.25% 0 0 0;position:relative;">
  <iframe allow="autoplay; fullscreen" allowfullscreen src="https://player.vimeo.com/video/789530662?background=1&amp;wmode=opaque" style="background-color: #    #0D0D0D;position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0">
  </iframe>
</div>

Figured it out!

Here is what I put in my Custom CSS

/* Ensure autoplay vide embeds do not have space above and below */
@media only screen and (max-width: 768px)
.collection-type-index.design-slideshow.slideshow-aspect-ratio-169-widescreen .index-gallery {
    padding-bottom: 56.25%;
}

This video was super helpful: https://youtu.be/_U-mTKdX0D4?t=256

As was this post: https://forum.squarespace.com/topic/168411-need-help-resizing-height-of-gallery-sections-in-version-71/

So it looks like you just need to find the place that will make the desied changes. Then add a custom CSS bit to change it every time.

Also I think the "@media only screen and (max-width: 768px)" is what triggers the mobile behavior.