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

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

You can set a fallback image, then share site url, we can give some code to hide video on mobile, show image only

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! 

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

WOW! Thank you so, so much!

Hi there, 

I also need assistance with this same exact issue... https://www.woodlandfitness.com/. I set the fallback image but am not able to get the mobile version to set to the fallback image instead of the video on the desktop version of the site.