Jump to content

Background video for desktop and photo for mobile devices?

Recommended Posts

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. 🙂

Edited by 7TK
Link to comment

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

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.”

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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! 🙏

Edited by 7TK
Link to comment
  • 2 years later...
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?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.