Disable background video on mobile

Site URL: https://www.eshertennis.co.uk/videotestpage2

I'm using 7.1, and have uploaded a video directly to Squarespace to use as a background. On desktop it works perfectly.

However, on mobile devices the video quality is very poor so I want to replace it with an image. I've tried following the steps here: https://www.rebeccagracedesigns.com/blog/video-banner-mobile - but they didn't work for me.

Does anybody have any ideas how I can prevent the video background from appearing on mobile devices and replace it with a static image?

Thanks!

Use the mobile fallback image feature of background videos.

Let us know how it goes.

Thanks Creedon but that doesn't work either. When I hit the URL on a mobile device, the mobile fallback image loads for a split second and is then replaced by the video.

It seems to me that the mobile fallback image only works as intended on mobile devices that are incapable of playing background video. But newer mobile devices that are capable of playing background video will show the fallback image for an instant and then play the video background.

I want my site to NEVER show the background video on mobile devices and only show a static image.

Ah. I see what you mean.

Is the code you tried installed on the site now? If not, and assuming it wasn't causing an issue, other than not working. Could you install it again?

We can then take a look at your issue.

Thanks for this, Creedon. Really appreciate your help. I've put the code back on the page now:
https://www.eshertennis.co.uk/videotestpage2

I haven't added a mobile fallback image at the moment.

Replace the CSS with the following.

// hide background video on mobile, uses LESS syntax

@media only screen and ( max-width : 640px ) {

  [data-section-id="614d83396366d44183ffeb9e"] .section-background {
  
    & > * {
    
      display : none;
      
      }
      
    background-image : url(https://static1.squarespace.com/static/60105c27c73dc30e2600e7c3/t/614e262b84ed4320845868f1/1632511546056/DJI_0047.jpg);
    background-repeat : no-repeat;
    background-size : auto 100%;
    
    }
    
  }

This is for v7.1.

The only issue with the original code is that, I believe, it was written before the advent of SS hosted video backgrounds.

My version is a little more generalized in targeting the background elements and more specific in targeting the page section.

Let us know how it goes.

Creedon, you absolute genius! Thank you so much. This worked perfectly!