How could I remove a black bar that is showing below the video in the header of the home page?

Site URL: https://www.edinsoap.com/

On the home page, the main header has a video running off YouTube in the background. But on certain screen sizes, a black bar shows underneath. I have attached an image as a reference. I wanted to check if there is a way to set the padding to zero and resolve the issue? Or something along those lines, I am not entirely sure if the responsiveness of the site is working that way.

Thank you very much for your help in advance.

It seems to be due to the video having a wide aspect ratio. Sometimes on different screen sizes you get the black bars. Have you tried uploading the video to the background straight from the file as opposed to going the YouTube route?

Squarespace might handle the cropping better that way.