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!

Was there ever a solve here? Trying to accomplish the same thing with revolutionmotherhood.com

On 9/5/2024 at 5:01 AM, EmilyBrimmer said:

Was there ever a solve here? Trying to accomplish the same thing with revolutionmotherhood.com

You can use this to Website Tools > Custom CSS

section[data-section-id="66ca56fc0861cf3e4cb4561d"] .section-border img {
	opacity: 0 !important;
	visibility: hidden !important;
}

On 9/7/2024 at 5:01 AM, tuanphan said:

You can use this to Website Tools > Custom CSS

section[data-section-id="66ca56fc0861cf3e4cb4561d"] .section-border img {
	opacity: 0 !important;
	visibility: hidden !important;
}

 

This doesn't *quite* accomplish what I'm looking for, because it also disables the fallback on mobile.  

On 9/11/2024 at 4:28 AM, EmilyBrimmer said:

This doesn't *quite* accomplish what I'm looking for, because it also disables the fallback on mobile.  

So what exactly do you want?

For external videos like Vimeo/YouTube, I used this code to show the website logo while the background video was loading.

This is for the first section of the page.

You can adjust the width and height if you want to show a larger image rather than the logo.

#sections > :first-child .sqs-video-background:has(.c-background-video:not(.is-ready)):before {
    content : "";
    width: 200px;
    height : 102px;
    background: url("your-image-link-here") no-repeat;
    position : absolute;
    top : 50%;
    left : 50%;
    transform :translate(-50%, -50%);
}