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 9
  • Created
  • Last Reply

Top Posters For This Question

9 answers to this question

Recommended Posts

  • 0

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 

Screen Shot 2021-09-05 at 4.11.14 PM.png

Screenshot_20210905-161023.png

Edited by Sayuri_
Link to comment
  • 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.

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.

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.

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