Jump to content

How do I have background video for desktop/Still image for mobile?

Recommended Posts

I am trying to have 2 different landing pages for my site. One for when you login on a desktop and the other for mobile.

I would like a background video to play for the desktop viewing but the background be a still image when viewed on a mobile device. 

Any idea how to achieve this? I am using 7.1. Thanks in advance

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

  • 7 months later...
On 8/17/2023 at 4:55 AM, StefanieS said:

This is exactly what I need help with! The fallback image is set. Here is the site URL: https://www.karenracanelli.com/

I would like to hide the video on mobile behind "featured classes" to show the fallback image only.  

I would be so grateful for the help! 

Add this to Design > Custom CSS or Website > Website Tools > Custom CSS

/* Mobile - Featured Classes - Hide video */
@media screen and (max-width:767px) {
[data-section-id="648901cb23c0b1595a4647fe"] iframe {
    visibility: hidden !important;
}
}

 

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
  • 3 months later...

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.