Jump to content

Display fall back image on Mobile instead of video.

Go to solution Solved by exitmult,

Recommended Posts

My site has a Youtube video that plays in the background.  When I first designed and tested it several months ago, the fallback image displayed on mobile devices.  I just discovered that now the video is playing on mobile devices.  The video will not work on a mobile device as it looks terrible.  After looking over the forums and redit, I was able to get the background video to stop displaying but I can't get the fall-back image to display.  I am currently using the code below to disable the video on mobile.  I got it from a 2021 forum thread (pasted at the bottom) but can't figure out how to properly implement the background image.  I can't figure out how to find the URL of my fallback image.  

Thanks in advance for the help.  

@media only screen and ( max-width : 640px ) {
[data-section-id="64f8d91696c6033781491d62"] .section-background {
      & > * {
        display : none;
        }
  background-image : fallback-image;
  }
  }

 

Edited by exitmult
Link to comment

Link to the site please?

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

Link to comment
On 9/30/2023 at 12:44 AM, exitmult said:

https://www.skilledtradesmedia.com/

Also, I don't know how to tag people in this forum. I'm brand new. 

Thanks!

Use this CSS code to disable mobile + show image

@media screen and (max-width:767px) {
[data-section-id="64f8d91696c6033781491d62"] .section-background>* {
    display: block !important;
}

[data-section-id="64f8d91696c6033781491d62"] .section-background img {
    left: 0 !important;
}
[data-section-id="64f8d91696c6033781491d62"] .section-background video {
    visibility: hidden !important;
}
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Tuanphan, thanks for replying.  I tried the code you provided and I can't get it to work.  I experimented around with it and no matter what I tried the video still loads in the background for mobile sites. 

 

The only way I can block the video is using:

@media screen and (max-width:767px) {
[data-section-id="64f8d91696c6033781491d62"] .section-background {
        display : none;
        }
}

But when I do that and try and use the ".section-background img" command you provided to force the background image to show, I just get a grey background.  

 

I tried using the 2 lines of code you provided to block and hide the video, see below, both alone and together.  No matter what I tried they don't block the background video from showing.  

@media screen and (max-width:767px) {
[data-section-id="64f8d91696c6033781491d62"] .section-background>* {
    display: block !important;
}

[data-section-id="64f8d91696c6033781491d62"] .section-background video {
    visibility: hidden !important;
}
}

At this point I have no idea what to do.   Thanks again for the help. 

Link to comment
On 10/3/2023 at 9:42 PM, exitmult said:

Tuanphan, thanks for replying.  I tried the code you provided and I can't get it to work.  I experimented around with it and no matter what I tried the video still loads in the background for mobile sites. 

 

The only way I can block the video is using:

@media screen and (max-width:767px) {
[data-section-id="64f8d91696c6033781491d62"] .section-background {
        display : none;
        }
}

But when I do that and try and use the ".section-background img" command you provided to force the background image to show, I just get a grey background.  

 

I tried using the 2 lines of code you provided to block and hide the video, see below, both alone and together.  No matter what I tried they don't block the background video from showing.  

@media screen and (max-width:767px) {
[data-section-id="64f8d91696c6033781491d62"] .section-background>* {
    display: block !important;
}

[data-section-id="64f8d91696c6033781491d62"] .section-background video {
    visibility: hidden !important;
}
}

At this point I have no idea what to do.   Thanks again for the help. 

Can you add & keep my code in CSS box? I can check it again easier

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.