Jump to content

Needing to hide a banner video on mobile

Recommended Posts

Posted

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? 

  • Replies 3
  • Views 925
  • Created
  • Last Reply
Posted

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!)

Posted

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.

 601525209_ScreenShot2021-07-27at8_53_15AM.png.0f18123824b3433169446c356f00d66c.png75418248_ScreenShot2021-07-27at8_53_28AM.png.58049af95cf080bee57c99cfde766c77.png

Posted

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.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.