Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Disable background video on mobile


Go to solution Solved by creedon,

Recommended Posts

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!

Link to comment

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.

Link to comment
  • Solution

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

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