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/3649084Website: www.braunsberger-media.comLeaders Lodge: See my Profile 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 Share Posted March 14 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 Share Posted March 16 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
tuanphan Posted March 25 Share Posted March 25 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
mukr Posted April 14 Share Posted April 14 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 Share Posted April 20 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
mukr Posted April 24 Share Posted April 24 Still giving me issues 😞 Thank you for your help though! 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