Deardraw Posted July 26, 2021 Posted July 26, 2021 Have a lovely video that we would like to use on the home page (includes large text blocks, etc) but which clips on mobile. Since the majority of our audience is viewing the site on mobile, I would like to disable the video and use the fallback image instead. Any thoughts on how I can accomplish this?
tuanphan Posted July 27, 2021 Posted July 27, 2021 Hi. Can you share link to page where you added banner video. We can help easier 10 hours ago, Deardraw said: Have a lovely video that we would like to use on the home page (includes large text blocks, etc) but which clips on mobile. Since the majority of our audience is viewing the site on mobile, I would like to disable the video and use the fallback image instead. Any thoughts on how I can accomplish this? 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!)
Deardraw Posted July 27, 2021 Author Posted July 27, 2021 Alas I can't share links at the moment due to NDAs but basically: • have a video added as a background that plays nicely on desktop • have a mobile fall back image added in but the video still plays on mobile (clipping off the left and right side). • wondering if there is code I can inject into the css to force the fall back image to display when viewed on mobile instead of the video.
IgnitePerth Posted July 28, 2021 Posted July 28, 2021 the simplest way would be to make 2 identical sections - one with video background and one with image background. Use media queries to hide the video section for mobile and hide the image section for anything else. so for your video section - hide on mobile (section ID is an example you will need to find yours): @media screen and (max-width:767px) { section[data-section-id="6100e140e8068a6d8db0fed2"]{ display:none; } } and to hide your image/mobile section for larger displays: @media screen and (min-width:768px) { section-ID-of-your-mobile-image-section{ display:none; } } EDIT: TRY THIS FIRST As soon as I hit submit I realised my error. Try the below, if it does not work, go back to the method above: (dont forget to replace the section-ID below with your ACTUAL section ID) @media screen and (max-width:767px) { section[data-section-id="6100e140e8068a6d8db0fed2"] .background-video{ display:none; } } If you find our solution helpful please thumbs up or mark it as the solution! Thank you 🙂 Contact Us for detailed help Common Squarespace Tips Sharing Your Site Link Squarespace web designers in Perth WA.
Recommended Posts
Archived
This topic is now archived and is closed to further replies.