jbassett Posted September 24, 2021 Share Posted September 24, 2021 Site URL: https://www.eshertennis.co.uk/videotestpage2 I'm using 7.1, and have uploaded a video directly to Squarespace to use as a background. On desktop it works perfectly. However, on mobile devices the video quality is very poor so I want to replace it with an image. I've tried following the steps here: https://www.rebeccagracedesigns.com/blog/video-banner-mobile - but they didn't work for me. Does anybody have any ideas how I can prevent the video background from appearing on mobile devices and replace it with a static image? Thanks! Link to comment
creedon Posted September 24, 2021 Share Posted September 24, 2021 Use the mobile fallback image feature of background videos. Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
jbassett Posted September 24, 2021 Author Share Posted September 24, 2021 Thanks Creedon but that doesn't work either. When I hit the URL on a mobile device, the mobile fallback image loads for a split second and is then replaced by the video. It seems to me that the mobile fallback image only works as intended on mobile devices that are incapable of playing background video. But newer mobile devices that are capable of playing background video will show the fallback image for an instant and then play the video background. I want my site to NEVER show the background video on mobile devices and only show a static image. Link to comment
creedon Posted September 24, 2021 Share Posted September 24, 2021 (edited) Ah. I see what you mean. Is the code you tried installed on the site now? If not, and assuming it wasn't causing an issue, other than not working. Could you install it again? We can then take a look at your issue. Edited September 24, 2021 by creedon Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
jbassett Posted September 24, 2021 Author Share Posted September 24, 2021 Thanks for this, Creedon. Really appreciate your help. I've put the code back on the page now:https://www.eshertennis.co.uk/videotestpage2 I haven't added a mobile fallback image at the moment. Link to comment
Solution creedon Posted September 24, 2021 Solution Share Posted September 24, 2021 Replace the CSS with the following. // hide background video on mobile, uses LESS syntax @media only screen and ( max-width : 640px ) { [data-section-id="614d83396366d44183ffeb9e"] .section-background { & > * { display : none; } background-image : url(https://static1.squarespace.com/static/60105c27c73dc30e2600e7c3/t/614e262b84ed4320845868f1/1632511546056/DJI_0047.jpg); background-repeat : no-repeat; background-size : auto 100%; } } This is for v7.1. The only issue with the original code is that, I believe, it was written before the advent of SS hosted video backgrounds. My version is a little more generalized in targeting the background elements and more specific in targeting the page section. Let us know how it goes. jbassett 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
jbassett Posted September 25, 2021 Author Share Posted September 25, 2021 Creedon, you absolute genius! Thank you so much. This worked perfectly! creedon 1 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