Background Video turns to White on Mobile Devices

Site URL: https://raccoon-radish-ytrb.squarespace.com/

I'm having an issue with my homepage, which is currently a YouTube video in the background on desktop browsers and working perfectly fine there, but on mobile phones, it shows the fallback image, which is fine, but when you start scrolling down, that video section becomes white. And it stays white even when you scroll back up. On my iPad, it also shows the fallback image and although that section doesn't become completely white when you scroll down, it does become partly white. You can see for yourself.

Passcode is flutesandflutists

Any help would be appreciated.

EDIT: I've been playing with the image dimensions and noticed that if I shrunk the width to 2500 pixels, it's appearing a little better on mobile. Instead of turning entirely white, it's only about half. So it's probably something to do with the dimensions. I then resized it according to what SS recommends, which is apparently 2500 x 1500 for banner images but then that made it a bit worse, with roughly 1/8 of the image turning white. I also noticed that as I'm scrolling down, the image looks like it's trying to zoom in but it's behaving strangely. I don't want to have any effect for the fallback image but I can't seem to change it.