Only display mobile fall back image on mobile?

I have video thumbnails on my site for desktop but am trying to make the mobile fallback image display only for mobile devices. Right now the video loads on mobile and it looks low quality, so would prefer to only have the fallback static image show for mobile screens. And keep the video for desktop. Any help would be appreciated! 

https://www.bryanbarnes.me/

Hi,

You mean video of projects on homepage?

8 hours ago, tuanphan said:

Hi,

You mean video of projects on homepage?

Yeah exactly, I would like them to be stills for mobile. But keep what it looks like on desktop. TY!

On 7/7/2023 at 10:17 PM, bryanb11 said:

Yeah exactly, I would like them to be stills for mobile. But keep what it looks like on desktop. TY!

Try adding this to Design > Custom CSS

/* Mobile video homepage */
@media screen and (max-width:767px) {
body.homepage div#player {
    visibility: hidden !important;
    opacity: 0 !important;
}
body.homepage .sqs-video-background.mobile .custom-fallback-image {
    opacity: 1 !important;
    display: block !important;
    z-index: 10 !important;
}
}

Thank you! I tried this and when i look at it the site on mobile, it seems that it is not showing the fall back image. Is there a fix? Thanks again

This worked! Thank you so much Tuan!