Jump to content

Still Image Replace Video on Mobile

Recommended Posts

  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

On 9/23/2020 at 11:43 PM, ErikR said:

@tuanphan This home video https://coconut-triceratops-wpkr.squarespace.com. I would like it to only play for laptops desktop/iPads but when viewed on a phone, it should be a still picture. Let me know if this helps 

You can add 2 sections. Section 1 is video (current section). Section 2 is image. Then I will use code to hide Video section + show image section on mobile.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 year later...
2 hours ago, MelB said:

I know this is an old forum but I am trying to make this work currently and not having s uccess. What is the CSS code?

What is site url?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 year later...
On 4/10/2023 at 3:11 PM, kinguyen said:

Hi @tuanphan can you help me as well for my site please? I also would like to keep the video background playing on the desktop but switch to an image in mobile view. Thank you for your help. My site is: https://k-i.fi/ 

Add to Design > Custom CSS. Replace Pixabay image with your image url

/* video desktop image mobile */
@media screen and (max-width:767px) {
[data-section-id="633dc6e18d713b57d3e2ee1b"] .section-background>div {
    opacity: 0;
}
[data-section-id="633dc6e18d713b57d3e2ee1b"] .section-background {
    background-image: url(https://cdn.pixabay.com/photo/2023/03/18/16/26/ha-giang-7860907_1280.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.