Display fall back image on Mobile instead of video.

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;
  }
  }

Link to the site please?

https://www.skilledtradesmedia.com/

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

Thanks!

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;
}
}

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. 

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

Hi, I’ve tried these codes and still can’t get the mobile fall back image to load on my landing page/homepage. All that appears is the landscape video for desktop. Not the custom portrait gif I loaded into the mobile fallback content box. 

any idea what I’m doing wrong?

website is k-tess.com

thanks