Jump to content

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

Recommended Posts

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

Link to comment
  • 7 months later...
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;
}
}

 

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
  • 3 months later...
  • 2 months later...

Hi, I tried solving this myself but can't. Could someone help me? I would like:
1. ONLY show fall back image on mobile, not video (as it is cropped in a way that doesn't look good) 
2. On desktop continue to show the video but NOT show the fall back image. At the moment in sometimes flashes up in the beginning and it doesn't look good.

Can you help with this @tuanphan? Any help would be much appreciated!

URL is www.teamgreen.earth

 

 

Link to comment
On 2/13/2024 at 5:23 PM, Gretad81 said:

Hi, I tried solving this myself but can't. Could someone help me? I would like:
1. ONLY show fall back image on mobile, not video (as it is cropped in a way that doesn't look good) 
2. On desktop continue to show the video but NOT show the fall back image. At the moment in sometimes flashes up in the beginning and it doesn't look good.

Can you help with this @tuanphan? Any help would be much appreciated!

URL is www.teamgreen.earth

 

 

Try this code to Website > Website Tools > Custom CSS

[data-section-id="6537da1b0888bd27966069d6"] {
/* Mobile */
@media screen and (max-width:991px) {
video {
    opacity: 0;
}
img {
    opacity: 1 !important;
}
}
/* desktop */
@media screen and (min-width:992px) {
img {
    opacity: 0 !important;
}
}}

 

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
12 hours ago, Gretad81 said:

@tuanphan Thank you so much. It works! Amaaaazing! Now I just have to work out why the image doesn't show with the lines in the centre even though the focus dot is right in the centre of the image. Any idea on that? Thanks a million!!!

What should it look like?

image.png.513f2fe8760705f855d5e7ad63aabc9a.png

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

basically the image should be vertically centre aligned but even though the aligner dot is in the middle (see screenshot) the image is higher. I have now figured out that for some reason the image is hidden behind the disappearing header. anyway to start the image below the header without adding a spacer (tried the spacer method and that messed up the desktop video).

Might there be a bit of CSS we can use here?

Thank you so much! Really appreciate your help!

Screenshot 2024-02-15 at 09.51.18.png

IMG_1810.PNG

Link to comment

Thank you soooo much! That worked a treat for mobile but now has knocked out the video on desktop (video is now no longer vertically centre aligned 🫣) Any final ideas to fix that?

I can't thank you enough, I have already learned so much in this process!!

Screenshot 2024-02-16 at 15.51.46.png

Link to comment

Hi I have the same issue. I have a video loop for the desktop site (www.roseacpalmer.co.uk) but on mobile view it looks terrible - either a white block beneath it or the video is too big and cropped nadly so doesn't look good (see screenshots). I would ideally like to make the video look good but if that isn't possible I would prefer a still image on the mobile site. Can you advise how to do this?

Screenshot 2024-02-18 at 13.21.34.png

Screenshot 2024-02-18 at 13.19.52.png

Link to comment

@rosepalmer22 I know, it is so annoying that some things like this still hang together with desktop. @tuanphan was so kind as to give me this code snippet above (but you need to find out what your video/image is called, that is the part I couldn't work out).

before that you also set the fall back image. So when you upload the video and switch to mobile view in the editor mode, in there you can scroll down and it will say "fallback image". See screenshot. Then you need to enter the code.

 

[data-section-id="6537da1b0888bd27966069d6"] {
/* Mobile */
@media screen and (max-width:991px) {
video {
    opacity: 0;
}
img {
    opacity: 1 !important;
}
}
/* desktop */
@media screen and (min-width:992px) {
img {
    opacity: 0 !important;
}
}}

Screenshot 2024-02-18 at 14.33.15.png

Link to comment
On 2/18/2024 at 9:01 PM, rosepalmer22 said:

Hi I have the same issue. I have a video loop for the desktop site (www.roseacpalmer.co.uk) but on mobile view it looks terrible - either a white block beneath it or the video is too big and cropped nadly so doesn't look good (see screenshots). I would ideally like to make the video look good but if that isn't possible I would prefer a still image on the mobile site. Can you advise how to do this?

Screenshot 2024-02-18 at 13.21.34.png

Screenshot 2024-02-18 at 13.19.52.png

The height of the video is not enough to fill the height of the mobile screen, so a white block will appear.

But if make video fullheight, it won't fullsize

You can consider replacing it with image on mobile only (If you need this, I can give code)

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
On 2/18/2024 at 9:34 PM, Gretad81 said:

@rosepalmer22 I know, it is so annoying that some things like this still hang together with desktop. @tuanphan was so kind as to give me this code snippet above (but you need to find out what your video/image is called, that is the part I couldn't work out).

before that you also set the fall back image. So when you upload the video and switch to mobile view in the editor mode, in there you can scroll down and it will say "fallback image". See screenshot. Then you need to enter the code.

 

[data-section-id="6537da1b0888bd27966069d6"] {
/* Mobile */
@media screen and (max-width:991px) {
video {
    opacity: 0;
}
img {
    opacity: 1 !important;
}
}
/* desktop */
@media screen and (min-width:992px) {
img {
    opacity: 0 !important;
}
}}

Screenshot 2024-02-18 at 14.33.15.png

 

On 2/19/2024 at 12:57 AM, rosepalmer22 said:

Thanks! Could you advise where I find the image name?  @tuanphan

It calls Section ID, not image name, use this free tool to find id

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

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
  • 1 month later...

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.