Jump to content

How can I hide the background video section on desktop and mobile?

Go to solution Solved by KejiChim,

Recommended Posts

Sorry to bothering you guys,

when I working on my website I found that I can't use same section to show different background video with desktop and mobile mode due to the video ratio problem.

So I created to different video which are horizontal version and vertical version of it.

I put both of it on my page, but I don't know how to hide the horizontal one in mobile mode and also hide the vertical one in desktop mode at the same time. Sorry I totally don't know how to solve this problem with css coding even I have read lots of thread over internet.

My website is kenjichim.work and the password is 12345678.

Appreciate if anyone can help

Link to comment
  • Replies 3
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

update: I solved it by following an youtube video!

If anyone got same issue with me you can try this

the first section id you can put in the one you wanna hide on mobile mode
the second section id you can put in the one you wanna hide on desktop mode

/* Hide on mobile and desktop device */

@media screen and (max-width:640px) {

@media screen and (min-width:640px) {
section[data-section-id="647cacc597b1a97fcaac7e2e"] {display:none;}}

Edited by KejiChim
also leave the solution here
Link to comment
  • 2 months later...
On 8/15/2023 at 3:03 PM, noemieseguy said:

Hello everyone,

I would like to put a video background on my homepage but I would like this one to also adapt to the mobile format.

I have both sizes.

Is there a way to hide desktop video on mobile and vice versa?

Thank you so much !





You can add 2 videos first, then we can give code to show - hide on desktop/mobile

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.