Adding Video Header even with having a image as full page background

Hi everyone, 
I want to add a video header to my about page, I have inserted a full page background image and used CSS to do so and that is the reason why my video background doesn't show. 
I have added now a video as block but there is a big gap on top and below. 
 

Is there any ways to tweak it so its aligned on the page or do you have any recommendation to adjust the CSS so it allows me to use a video background for a section? 

Here is the Code I use: 

 

/* squarespace update in 2023 - not in the video but important */
.section-border{opacity:0!important} 

/* Add the image as a background*/
#page{
background-image:url(https://static1.squarespace.com/static/6638d4bb307ca1305dcde0f0/t/663b5b6ef2696813f4a34ab5/1715166065224/Cream+and+Brown+Photographic+Beauty+Site+Launch+Website+%283%29.png);
background-size: cover}

/* Make the page section backgrounds transparent */
#page .page-section {
background: transparent!important
}
#page .page-section .section-background {
background: transparent !important;
}
.sqs-block-button-element--medium{background-color:transparent!important; background-image:url(https://static1.squarespace.com/static/6638d4bb307ca1305dcde0f0/t/663a12005a03926779db796e/1715081731369/Untitled+design+%2865%29.png); background-size:cover!important; background-position:center;background-repeat:no-repeat!important}

// CUSTOM FONT
@font-face {
font-family: 'blackstone';
src: url(https://static1.squarespace.com/static/6638d4bb307ca1305dcde0f0/t/663a1360b60fba5d938dc014/1715082080990/Blackstone.ttf);
}

h1 {
font-family: 'blackstone';
font-size: 20pt;
letter-spacing: 1px;
line-height: 140%;
}

I have attached an image

Any help is welcome! 

Thank you .

What is page url? We can check problem easier.

Hi, 

The URL is: https://roadrunner-apricot-pkw6.squarespace.com/about-4 
PW: elevate 

Thank you for having a look!