RebeccaBurt Posted December 20, 2022 Share Posted December 20, 2022 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 Link to comment
Solution ArminB Posted December 20, 2022 Solution Share Posted December 20, 2022 (edited) Hey! 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 🙂 https://developer.chrome.com/blog/autoplay/ Edited December 20, 2022 by ArminB paul2009 and tuanphan 2 About Armin: Squarespace Expert Profile: https://www.squarespace.com/designer/profile/3649084 Website: www.braunsberger-media.com Link to comment
RebeccaBurt Posted December 20, 2022 Author Share Posted December 20, 2022 Brilliant! Why didn't I think of that. 🙂 Thank you ArminB 1 Link to comment
mukr Posted March 14, 2023 Share Posted March 14, 2023 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? Link to comment
tuanphan Posted March 16, 2023 Share Posted March 16, 2023 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 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
tuanphan Posted March 25, 2023 Share Posted March 25, 2023 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; } } 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
mukr Posted April 14, 2023 Share Posted April 14, 2023 Thank you! I just tried this and it's still showing the fallback image for a second. Any other tips? Link to comment
tuanphan Posted April 20, 2023 Share Posted April 20, 2023 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
mukr Posted April 24, 2023 Share Posted April 24, 2023 Still giving me issues 😞 Thank you for your help though! Link to comment
EmilyBrimmer Posted September 4 Share Posted September 4 Was there ever a solve here? Trying to accomplish the same thing with revolutionmotherhood.com Link to comment
tuanphan Posted September 7 Share Posted September 7 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; } 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
EmilyBrimmer Posted September 10 Share Posted September 10 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. Link to comment
tuanphan Posted September 13 Share Posted September 13 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? 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
sorca_marian Posted September 13 Share Posted September 13 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%); } 👨🔧👨💻 Squarespace plugins 🙋♂️ Squarespace Custom Web Development & Design Services 📅 Todoist alternative | Increase your Productivity 📹 Squarespace Tutorials for free - YouTube📹 💯🚀 I have worked on over 300 Squarespace sites with custom code for over 9 years 🙋♂️ Let's connect on LinkedIn 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