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

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

password: batcar1962

Hi,

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

Brilliant! Why didn't I think of that. 🙂 Thank you

I made a gif for the fallback image. I don't want to use a screenshot. Any other ideas or coding on solving issue 1?

On 3/14/2023 at 12:04 PM, mukr said:

I made a gif for the fallback image. I don't want to use a screenshot. Any other ideas or coding on solving issue 1?

If you share site url, we can check & give code easier

jewishneedham.com

On 3/23/2023 at 9:45 AM, mukr said:

jewishneedham.com

Add to Design > Custom CSS

@media screen and (max-width:767px) {
section#introduction-impact figure iframe {
    visibility: hidden;
}
}

Thank you!

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

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

Still giving me issues 😞

Thank you for your help though!