How to disable video background in mobile view

Site URL: https://www.sayuriichida.com/

Hello,
Can anyone please help me with disabling video background only in mobile view?
I have tried most of the CSS found on similar topics, but none worked on my website. 
The background video gets cropped weirdly on mobile, so that I would like to hide it.
I was able to disable the video with some CSS. However, it hid the project titles altogether, which are located in the centre of my homepage.  
Thank you very much in advance. 
Best regards,
Sayuri 

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;
}
}

Site URL: http://www.jakemitchellmiller.com

Hi I'm having a similar issue - I have tried various provided codes from different forums with the correct section ID's and haven 't found any luck. In theory I would love to keep the same background video for the mobile version of my site with the frame repositioned so faces aren't cropped out. But if this is not possible I'd be fine with just a static image on mobile the mobile version and video on desktop.

Please advise.

17 hours ago, 5ake5 said:

Site URL: http://www.jakemitchellmiller.com

Hi I'm having a similar issue - I have tried various provided codes from different forums with the correct section ID's and haven 't found any luck. In theory I would love to keep the same background video for the mobile version of my site with the frame repositioned so faces aren't cropped out. But if this is not possible I'd be fine with just a static image on mobile the mobile version and video on desktop.

Please advise.

Use this CSS code

@media screen and (max-width:640px) {
body.homepage .Parallax-item:first-child iframe {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
section#welcome {
    min-height: unset;
    height: 200px;
}
body.homepage .Parallax-item:first-child figure {
    bottom: 0 !important;
}
}