Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How to disable video background in mobile view


Sayuri_

Question

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 

 

Edited by Sayuri_
Found redundant information
Link to comment
  • Answers 17
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

17 answers to this question

Recommended Posts

  • 0

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

 

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
  • 0
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

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

 

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
  • 0

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

Link to comment
  • 0
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?

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
  • 0
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?

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

 

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