Jump to content

Needing to hide a banner video on mobile

Recommended Posts

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? 

Link to comment
  • Replies 3
  • Views 840
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

Link to comment

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

Edited by Deardraw
Link to comment

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;
 
}
}

Edited by IgnitePerth
update solution

Contact Us for detailed help

Common Squarespace Tips

Sharing Your Site Link

Squarespace web designers in Perth WA.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.