Jump to content

Code to prevent mobile fallback image briefly showing before background video loads.

Go to solution Solved by ArminB,

Recommended Posts

site link: https://onetreehill.squarespace.com/contact

password: batcar1962


Issue 1: My client has requested a background video on the contact page. I have set an image for the mobile fallback, but when you go to the contact section, the fall-back image is showing briefly before the video loads. I have no coding experience. I have found some codes posted in other forum posts, but could not get them to work when pasting them in the css box.

Issue 2: The video also has sound which the client would like to work if possible. I understand that background auto-load videos don't play sound and that there are issues around this with browsers etc, so no problem if this can't be fixed, but if code can be provided for the sound, that would be a bonus.

Thank you

Link to comment
  • Solution


Issue 1: Just make a screenshot of the first frame of the video and use this as the fallback. This should be a smoother experience.

Issue 2: Most browsers would block background video autoplay anyway so rather not 🙂


Edited by ArminB

About Armin:
Squarespace Expert Profile: https://www.squarespace.com/designer/profile/3649084
Website: www.braunsberger-media.com
Leaders Lodge: See my Profile

Link to comment
  • 2 months later...
  • 3 weeks later...
On 4/15/2023 at 3:15 AM, mukr said:

Thank you!

I just tried this and it's still showing the fallback image for a second. Any other tips?

Use this code

@media screen and (max-width:640px) {
section#introduction-impact img {
    visibility: hidden;
	opacity: 0;


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.