SoundFlashFilms Posted December 30, 2021 Share Posted December 30, 2021 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 jpeter Posted December 31, 2021 Solution Share Posted December 31, 2021 @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; } } SoundFlashFilms and tuanphan 1 1 Link to comment
SoundFlashFilms Posted January 2, 2022 Author Share Posted January 2, 2022 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! Link to comment
dansullivan Posted July 27, 2022 Share Posted July 27, 2022 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 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment