Jump to content

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

Go to solution Solved by jpeter,

Recommended Posts

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

Link to comment
  • Solution

@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;    
  }
}

 

Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee!

Link to comment
  • 6 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.