Fallback image flashes for a split-second before my website loads video background

Site URL: https://eugenia-grace.squarespace.com/

The password to the site is: egrace

I am wondering if it is possible to remove the very quick flash of the fallback image as soon as you load in the website. It seems that the fallback image is shown for a split-second as the video background loads in. Can I replace this flashing image with a simple solid white background instead of the fallback image?

Currently, I am using the fallback image for the mobile version of the site, so I cannot delete it.

I am using the following custom CSS to make the fallback image on this background display when the site width is set to 767px or less:

-----------

/* Mobile show fallback image */
@media screen and (max-width:767px) {
[data-section-id="618bdd50e7453731cdf1aa61"] .sqs-video-background-native__video-player.video-player {
    display: none !important;
}
[data-section-id="618bdd50e7453731cdf1aa61"] img {
    opacity: 1 !important;
}
}

----------------

I noticed that when I remove the fallback image altogether, the site displays the site background color (white) while the video background takes a fraction of a second to load in.

I would like this to happen, but I do not wish to remove the fallback image, since I am using it for the mobile version of the site.

Thanks in advance,

Matt

On 12/31/2021 at 4:18 PM, jpeter said:

@SoundFlashFilms You can try using the following CSS:
 

/* Hide fallback image on desktop using min-width media query */
@media (min-width: 768px) {
  .sqs-video-background-native__fallback-image {
    display: none !important;    
  }
}

 

Thank you!

So the OP code hides video on mobile (under 767)

The code from @jpeter and @SoundFlashFilms hides the fallback image on desktop (over 767)

Is that correct?

The OP URL is down, any samples?

TIA