How to disable video background in mobile view

Hi,

You want

1. disable mobile video?
2. Or
3. Resize mobile video?

Hello @tuanphan,

I want to disable (hide) the background video of my homepage only on mobile as the video gets cropped and it doesn't look great. 

Please find the screenshots of mobile and desktop views attached. 

Thank you,

Sayuri 

Add to Design > Custom CSS

/* hide video homepage on mobile */
@media screen and (max-width:767px) {
body.homepage .sqs-video-background-native__video-player.video-player {
    visibility: hidden;
}
}

@tuanphan Wow! It worked perfectly! Thank you so much!!

@tuanphan Would you be able to help me? I'm in the same boat as the OP, but I was wondering how i'd be able to disable the video, just like how the code works for me, but to also be able to show the fallback image?

@tuanphan I have the same question as @ViktorMcFly about being able to show the fallback image in the place of the video on mobile

Thank you!

On 9/10/2021 at 10:57 AM, ViktorMcFly said:

@tuanphan Would you be able to help me? I'm in the same boat as the OP, but I was wondering how i'd be able to disable the video, just like how the code works for me, but to also be able to show the fallback image?

On 9/11/2021 at 12:26 AM, Flambassador said:

@tuanphan I have the same question as @ViktorMcFly about being able to show the fallback image in the place of the video on mobile

Thank you!

Can you share site url? We can check easier

@tuanphan My site URL is www.laurenkalette.com
The text on mobile is getting cut off. If there is a way of resizing for mobile that would be ideal. Otherwise Hiding the video but displaying a fallback image is the next best thing. Thank you.

On 9/14/2021 at 3:11 AM, Flambassador said:

@tuanphan My site URL is www.laurenkalette.com
The text on mobile is getting cut off. If there is a way of resizing for mobile that would be ideal. Otherwise Hiding the video but displaying a fallback image is the next best thing. Thank you.

Add to Design > Custom CSS

/* resize mobile home top video */
@media screen and (max-width:767px) {
[data-section-id="60466712d8d3031cc51665a4"] {
    min-height: unset !important;
}
}

Hey dear @tuanphan, I have the same problem as everyone here, I was able to hide the video with the css you provided, but I would like to display the fallback image when in mobile view, instead of the resizing option. Do you have an idea for that? 
Best regards!

/* remove video - show fallback image on mobile */
@media screen and (max-width:767px) {
body.homepage article section:first-child .sqs-video-background-native__video-player.video-player {
    display: none;
}
body.homepage article section:first-child .sqs-video-background-native__fallback-image--hidden {
    opacity: 1 !important;
}
}

16 hours ago, Annabanana121 said:

Hey dear @tuanphan, I have the same problem as everyone here, I was able to hide the video with the css you provided, but I would like to display the fallback image when in mobile view, instead of the resizing option. Do you have an idea for that? 
Best regards!

What is your site url?

I also am looking to hide the video but not the fallback image. Site URL is stevesmobilesecurity.squarespace.com pass: smsisthebest

Several of the slides have background videos.

9 hours ago, clarkbeggs said:

I also am looking to hide the video but not the fallback image. Site URL is stevesmobilesecurity.squarespace.com pass: smsisthebest

Several of the slides have background videos.

You mean top slide video?

Would love to know how to hide the background video for all slides on mobile (but still keep the fallback image)

@tuanphan

Hi @tuanphan let me know if that makes sense. Thank you for taking a look.

On 5/25/2022 at 5:35 AM, clarkbeggs said:

Hi @tuanphan let me know if that makes sense. Thank you for taking a look.

Add to Design > Custom CSS

@media screen and (max-width:767px) {
section[data-current-styles*='"backgroundMode": "video"'] iframe {
    opacity: 0 !important;
}
}