cindyscillo Posted July 9, 2019 Share Posted July 9, 2019 (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, 2019 by Paul2009 Link to comment
Solution paul2009 Posted July 10, 2019 Solution Share Posted July 10, 2019 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. Designcoach and louieholm 1 1 About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
marie_pierre Posted July 10, 2019 Share Posted July 10, 2019 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! Link to comment
marie_pierre Posted July 10, 2019 Share Posted July 10, 2019 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! Link to comment
paul2009 Posted July 10, 2019 Share Posted July 10, 2019 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. About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
cindyscillo Posted July 11, 2019 Author Share Posted July 11, 2019 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. Link to comment
FF100 Posted July 12, 2019 Share Posted July 12, 2019 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 Link to comment
marie_pierre Posted July 12, 2019 Share Posted July 12, 2019 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. Link to comment
FF100 Posted July 13, 2019 Share Posted July 13, 2019 I dont know enough about this but why does it allow you to enter the code in the cover page settings? Link to comment
Guest Posted May 2, 2020 Share Posted May 2, 2020 On 7/10/2019 at 2:01 PM, paul2009 said: 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. Hi Paul, Would this work for 7.1 too? Alternatively, is there a way to change the size of the mobile fallback image, as this looks distorted when displayed on mobile/smaller devices? I can DM you the URL and password if required. 🙂 Many thanks in advance! Link to comment
Muhammad__ Posted August 5, 2020 Share Posted August 5, 2020 Hello, i want to remove bg video only from desktop and want to show banner on mobile is that possible with SS GUI ?? i don't want to do it with custom code ?? please advice. Link to comment
tuanphan Posted August 5, 2020 Share Posted August 5, 2020 2 hours ago, Muhammad__ said: Hello, i want to remove bg video only from desktop and want to show banner on mobile is that possible with SS GUI ?? i don't want to do it with custom code ?? please advice. You can do it with custom code (Personal Plan) 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
Asiya Posted August 19, 2020 Share Posted August 19, 2020 On 7/10/2019 at 6:01 PM, paul2009 said: 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. Hi, @paul2009 I need help with my mobile banner. its cropping on mobile. please help. here's the url: Patientorator.com Thanks in advance! Link to comment
SRD Posted April 8, 2021 Share Posted April 8, 2021 Hi all, I'm having a similar issue, attempting to disable the video on my cover page, and relying on the fallback image I've uploaded to play only when in mobile format. @paul2009, I've placed the following code in my Cover Page's settings: advanced: code injection window – @media only screen and (max-width: 768px) {.sqs-video-background .custom-fallback-image { display: block; opacity: 1; } { .sqs-video-background iframe { display: none;} } Unfortunately, I'm seeing that reps on the SS helpline see the fallback image (yay), but I'm still getting the video playing (unresponsively) on my mobile devices here at home (two separate devices, one with cache cleared). Any advice is appreciated_ Link to comment
bcmarimba Posted September 29, 2021 Share Posted September 29, 2021 On 7/10/2019 at 10:50 AM, paul2009 said: 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. Thanks for this, I tried rmeoving the collection code but it didn't work for my page. I want this page to force the fallback image (not play the video) on mobile: https://www.brasswoodptown.com/concierge Thanks for any help you can provide with code! Link to comment
tuanphan Posted September 30, 2021 Share Posted September 30, 2021 6 hours ago, bcmarimba said: Thanks for this, I tried rmeoving the collection code but it didn't work for my page. I want this page to force the fallback image (not play the video) on mobile: https://www.brasswoodptown.com/concierge Thanks for any help you can provide with code! Add to Design > Custom CSS /* Mobile show fallback image */ @media screen and (max-width:767px) { [data-section-id="5fd4e8e13ebe041631392c8d"] .sqs-video-background-native__video-player.video-player { display: none !important; } [data-section-id="5fd4e8e13ebe041631392c8d"] img { opacity: 1 !important; } } Adamec 1 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
bcmarimba Posted October 4, 2021 Share Posted October 4, 2021 On 9/30/2021 at 2:46 AM, tuanphan said: Add to Design > Custom CSS /* Mobile show fallback image */ @media screen and (max-width:767px) { [data-section-id="5fd4e8e13ebe041631392c8d"] .sqs-video-background-native__video-player.video-player { display: none !important; } [data-section-id="5fd4e8e13ebe041631392c8d"] img { opacity: 1 !important; } } perfect thank you again!! Adamec 1 Link to comment
bcmarimba Posted October 6, 2021 Share Posted October 6, 2021 On 9/30/2021 at 2:46 AM, tuanphan said: Add to Design > Custom CSS /* Mobile show fallback image */ @media screen and (max-width:767px) { [data-section-id="5fd4e8e13ebe041631392c8d"] .sqs-video-background-native__video-player.video-player { display: none !important; } [data-section-id="5fd4e8e13ebe041631392c8d"] img { opacity: 1 !important; } } Shoot, now it's not working on my home page -- help? https://www.brasswoodptown.com/ Link to comment
tuanphan Posted October 7, 2021 Share Posted October 7, 2021 8 hours ago, bcmarimba said: Shoot, now it's not working on my home page -- help? https://www.brasswoodptown.com/ If you want it works on all pages, use this new code /* Mobile show fallback image */ @media screen and (max-width:767px) { .sqs-video-background-native__video-player.video-player { display: none !important; } .section-background img { opacity: 1 !important; } } 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
bcmarimba Posted October 8, 2021 Share Posted October 8, 2021 On 10/6/2021 at 10:44 PM, tuanphan said: If you want it works on all pages, use this new code /* Mobile show fallback image */ @media screen and (max-width:767px) { .sqs-video-background-native__video-player.video-player { display: none !important; } .section-background img { opacity: 1 !important; } } thank you again!! amazing. Link to comment
TheHouseOfMischief Posted March 17, 2022 Share Posted March 17, 2022 Hi everyone, I have also been trying to hide the background video from the homepage (but not on the other pages) on mobile, but it's not working. I have tried many solutions of many different threads. I am obviously doing something wrong but have been unable to work out my mistake! https://www.muddytripods.com/ I am using Mojave from the Brine family (7.0). Can you help please? Thank you, Debora Link to comment
tuanphan Posted March 18, 2022 Share Posted March 18, 2022 13 hours ago, TheHouseOfMischief said: Hi everyone, I have also been trying to hide the background video from the homepage (but not on the other pages) on mobile, but it's not working. I have tried many solutions of many different threads. I am obviously doing something wrong but have been unable to work out my mistake! https://www.muddytripods.com/ I am using Mojave from the Brine family (7.0). Can you help please? Thank you, Debora Try adding to Design > Custom CSS /* hide banner video mobile */ @media screen and (max-width:640px) { body.homepage .Parallax-item:first-child iframe { opacity: 0 !important; visibility: hidden !important; display: none !important; } } 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
TheHouseOfMischief Posted March 21, 2022 Share Posted March 21, 2022 Thank you as ever Tuanphan, you're the best! Link to comment
LUDLOW Posted March 30, 2022 Share Posted March 30, 2022 @tuanphan @paul2009 I'm stumped and couldn't find an answer anywhere...THE GOOD: I was able to use one of the above CSS to get the Home banner to display as the fallback image on any mobile device while displaying as a video on any desktop. THE BAD: However, now the fallback image is momentarily flashing on desktop before the video begins, which is very annoying and affects the final look. I understand that it's just a placeholder while the video loads, but it's an issue. THE SOLUTION?: Ideally, I'd like to have this current fallback image continue to populate on any mobile as it is doing now. But I would like a plain black background (instead of the fallback image) to display on desktop while the video loads. Alternatively for mobile to get a similar end result, perhaps we could implement a plain black fallback background but add a text overlay if there is a way to make the banner text transparent on desktop but visible on mobile. The site is: https://arrowheadbrands.com. Please let me know if what I'm requesting is even possible or if there is something else you might suggest. Thank you kindly, Brent Link to comment
tuanphan Posted March 31, 2022 Share Posted March 31, 2022 16 hours ago, LUDLOW said: @tuanphan @paul2009 I'm stumped and couldn't find an answer anywhere...THE GOOD: I was able to use one of the above CSS to get the Home banner to display as the fallback image on any mobile device while displaying as a video on any desktop. THE BAD: However, now the fallback image is momentarily flashing on desktop before the video begins, which is very annoying and affects the final look. I understand that it's just a placeholder while the video loads, but it's an issue. THE SOLUTION?: Ideally, I'd like to have this current fallback image continue to populate on any mobile as it is doing now. But I would like a plain black background (instead of the fallback image) to display on desktop while the video loads. Alternatively for mobile to get a similar end result, perhaps we could implement a plain black fallback background but add a text overlay if there is a way to make the banner text transparent on desktop but visible on mobile. The site is: https://arrowheadbrands.com. Please let me know if what I'm requesting is even possible or if there is something else you might suggest. Thank you kindly, Brent Do you still need help? 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment