Background video for desktop and photo for mobile devices?

Hello,

Is it possible to use a background video on the landing page of a website, while using a photo as the background of that same section on mobile devices? 

Or, is it possible to adjust the background video such that it automatically appears well on mobile devices too? (It already looks good on a desktop, but doesn't appear properly on mobile devices.)

New to all this - would be grateful for any assistance!

Thanks. 🙂

Hi. Q1 Possible. Can you share site url? We can give some code to achieve this.

Or you can add 2 section with video background - image background. We can give the code to show video on desktop, show image on mobile

Thanks so much for responding! 

The site url is https://www.frjohnharvey.com/ and the password is sagart22naofa

I'd be grateful for the code for both options, so I could try each out and see what works best!  

14 hours ago, 7TK said:

Thanks so much for responding! 

The site url is https://www.frjohnharvey.com/ and the password is sagart22naofa

I'd be grateful for the code for both options, so I could try each out and see what works best!  

You mean this section? 

“The unchanging beauty of God brings a joy surpassing all the most desired pleasures of earth.”

Yes, that’s the section. 🙂

On 7/11/2021 at 6:00 PM, 7TK said:

Yes, that’s the section. 🙂

Add to Design > Custom CSS

/* mobile */
@media screen and (max-width:767px) {
/* hide video */
[data-section-id="60ad671deb90291962e54ad5"] .section-background div {
    visibility: hidden;
}
/* set new image background */
[data-section-id="60ad671deb90291962e54ad5"] .section-background {
    background-image: url(https://cdn.pixabay.com/photo/2021/06/21/20/15/bee-6354562__340.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left center;
}
}

Thank you so much, Tuan!!  That worked perfectly!  I now have the video appearing on the desktop and a still pic appearing on my phone.

I'm very, very grateful for your assistance! 🙏

Hello everyone ! 

Im having the same issu on my side. 

I would like to show background video on my homepage and adapt the format.  I have the desktop and mobile one but don't know how I can show only one depending the device 

Here my website : https://lute-turquoise-zy7w.squarespace.com/

19 hours ago, noemieseguy said:

Hello everyone ! 

Im having the same issu on my side. 

I would like to show background video on my homepage and adapt the format.  I have the desktop and mobile one but don't know how I can show only one depending the device 

Here my website : https://lute-turquoise-zy7w.squarespace.com/

You mean show video on desktop, show image on mobile

or resize on video on mobile only?