Edit the Background Video for Mobile

What does this code do?

This code snippet will show you two ways to make your background video mobile responsive.

Note: This code works best with videos from YouTube.

Option 1: Change the Video to an Image or Gif

There is no guarantee that your video will play on every mobile device. This will vary depending on the video on your website and the mobile device the visitor is using. A video could also cause your webpage to load slowly on mobile, which could harm your SEO.

To help your website stay mobile friendly, it may be a better idea to hide the video and display an image or a gif instead when viewed from a mobile device.

Custom CSS

Copy and paste this code into Design > Custom CSS

@media only screen and (max-width: 640px) {
  #COLLECTIONID {
    #page .page-section:nth-of-type(1) {
      .sqs-video-background {
        display: none;
      }

      .section-background {
        background: url("IMAGEURL");
        background-repeat: no-repeat;
        background-size: 100%;
      }
    }
  }
}

How to Use It

1. Copy and paste the code snippet as indicated above.

2. To learn how to find a collection id, check out our Start Here guide.

3. Change the 1 to match the section you are trying to change.

4. Prepare a new background image for mobile. It works best if it is a vertical image.

5. Click on Manage Custom Files in Design > Custom CSS

6. Upload the Image.

7. Delete the word IMAGEURL and place you cursor between the brackets.

8. Click on the image you uploaded to insert its url into the brackets.

9. If your image doesn’t fill the full height of the section, you can replace the background-size with the code background-size: auto 100%; but beware that this may cause your image to zoom in. You can also use background-size: 100% 100%; but this may stretch your image. If you are having a hard time, I suggest playing with the ratio of your image. I find 1000px by 1500px works well. Remember that your image must be a vertical image to work well on mobile.

Option 2: Resize the Video on Mobile

The second option is to resize the video when on a mobile device. However, take note that if your video is not meant to be vertical and you have a tall section, this may leave you with a lot of black space above and below the video.

Custom CSS

Copy and paste this code into Design > Custom CSS

@media only screen and (max-width: 640px) {
  #COLLECTIONID {
    #page .page-section:nth-of-type(1) {
      .sqs-video-background #player {
        width: 100% !important;
        left: 0 !important;
      }
    }
  }
}

How To Use It

1. Copy and paste the code as indicated above.

2. To learn how to find a collection id, check out our Start Here guide.

3. Change the 1 to match the section you are trying to change.