cindyscillo 3 Posted July 9 (edited) I'm trying to get the video on golfpadgps.com/tags banner to NOT display and force the fall back image to display instead. I understand from SS the fact that it displays on some mobile devices is by design, however I've been asked to turn it off on mobile regardless of connection speed or browser. This is what I've tried. In inspector, the "display:none" works, but when I put it in the actual custom CSS section of the site, it doesn't do anything. @media only screen and (max-width: 768px) { .title-desc-wrapper has-main-image has-background-video { display:none; } } Edited July 10 by Paul2009 Share this post Link to post
paul2009 28,451 Posted July 10 Hello Squarespace don't control whether the background video is shown on mobile devices - it is controlled by your mobile's browser. In the past, mobiles would not load background videos but this changed recently because newer devices are now powerful enough to display them and an increasing number of networks (4G/5G/WiFi) are fast enough too. If you want to prevent them, you'll need some CSS. The CSS in your question is incorrect, so first you'll need to remove this. Then add the following (to Design > Custom CSS): @media only screen and (max-width: 768px) { #collection-580a9bee6a4963712b3646b8 .sqs-video-background .custom-fallback-image { display: block; opacity: 1; } #collection-580a9bee6a4963712b3646b8 .sqs-video-background iframe { display: none; } } This will remove the video on the specified page only. Let me know how you get on. -Paul Squarespace Expert & Professional Developer Contributors to this forum voluntarily give their time to help you. If we correctly answer your question, please accept the answer by clicking Accept below it (you'll see it when you're logged on). If an answer doesn't help, feel free to ask for more help or wait for other forum users to add their comments and/or answers. Whenever an accepted answer helps you, please vote it up using the up arrow on the right. This helps other forum users by giving them confidence in an answer. If a response has helped you, please give thanks using the button.Need personalised help? I'm a professional Developer who works with Designers internationally. You can book me via my company's website. www.sf.digital Share this post Link to post
marie_pierre 18 Posted July 10 Hi @Paul2009 , I'm having the same issue with my websitehttps://bodyform3d.squarespace.com/landing-page (password is: bodyform3d) I don't want video on mobile, I want a white background, that I set up as the fallback image. Any idea how to force that fallback image? I've used the code you mention, but not working on my site.. Thank you so much! Share this post Link to post
marie_pierre 18 Posted July 10 Hi @Paul2009 , I'm having the same issue with my websitehttps://bodyform3d.squarespace.com/landing-page (password is: bodyform3d) I don't want video on mobile, I want a white background, that I set up as the fallback image. Any idea how to force that fallback image? I've used the code you mention, but not working on my site.. Thank you so much! Share this post Link to post
paul2009 28,451 Posted July 10 The code above is for a specific page on a specific site because it includes a collection ID (#collection-580a9bee6a4963712b3646b8) from the site mentioned in the question. If you remove this element, it will work on similar sites. If a response has helped you, please give thanks using the button.Need personalised help? I'm a professional Developer who works with Designers internationally. You can book me via my company's website. www.sf.digital Share this post Link to post
cindyscillo 3 Posted July 11 Hey Paul2009! That worked exactly as I needed it to. Thanks for taking the time to help me. You saved me a ton of stress. Share this post Link to post
FF100 0 Posted July 12 Hi Paul, I am trying to disable the video playing on a cover page when viewed on Mobile and force it to display the backup image? Regards, Fraser Share this post Link to post
marie_pierre 18 Posted July 12 Hi @FF100 , I've read somewhere that CSS doesn't apply to Cover Page.I think you'll have to create a regular page for that. Share this post Link to post
FF100 0 Posted July 13 I dont know enough about this but why does it allow you to enter the code in the cover page settings? Share this post Link to post