How to prevent a fixed element from scrolling over the footer?

Hi guys!

I think I need help with my site. 
I added a video with a fixed position to my home page. The footer is also fixed and reveals as you scroll down. 
So far so good, but when you scroll down, the fixed video shows up in front of the footer. Is there a simple solution to hide the video in the footer section? 

Thank you in advance!

https://circle-mushroom-aptx.squarespace.com/
PW:27km

On 2/21/2023 at 8:31 PM, 27web said:

Hi guys!

I think I need help with my site. 
I added a video with a fixed position to my home page. The footer is also fixed and reveals as you scroll down. 
So far so good, but when you scroll down, the fixed video shows up in front of the footer. Is there a simple solution to hide the video in the footer section? 

Thank you in advance!

https://circle-mushroom-aptx.squarespace.com/
PW:27km

You can try adding to Home > Design > Custom css

@media only screen and (min-width: 768px) {
  body:not(.sqs-edit-mode-active) #footer-sections {
    z-index: 9;
    position: relative;
  }
}

Support me by pressing 👍  or marking as solution if this useful for you

My testing

@Beyondspace thank you!
That will keep the video behind the footer sections, but then you also lose the fixed footer, which reveals beneath the page margin. Is there a way to show the video only in the first section of the page?