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

Disable banner video on mobile?


Go to solution Solved by paul2009,

Recommended Posts

I'm trying to get the video on golfpadgps.com/tags banner to NOT display and force the fall back image to display instead. I understand from SS the fact that it displays on some mobile devices is by design, however I've been asked to turn it off on mobile regardless of connection speed or browser. This is what I've tried. In inspector, the "display:none" works, but when I put it in the actual custom CSS section of the site, it doesn't do anything.


@media only screen and (max-width: 768px) {
 .title-desc-wrapper has-main-image has-background-video {
   display:none;
 }
}


Edited by Paul2009
Link to post
  • Replies 12
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

Hello Squarespace don't control whether the background video is shown on mobile devices - it is controlled by your mobile's browser. In the past, mobiles would not load background videos but this c

Hello

Squarespace don't control whether the background video is shown on mobile devices - it is controlled by your mobile's browser.

In the past, mobiles would not load background videos but this changed recently because newer devices are now powerful enough to display them and an increasing number of networks (4G/5G/WiFi) are fast enough too.

If you want to prevent them, you'll need some CSS. The CSS in your question is incorrect, so first you'll need to remove this. Then add the following (to Design > Custom CSS):


@media only screen and (max-width: 768px) {
 #collection-580a9bee6a4963712b3646b8 .sqs-video-background .custom-fallback-image {
   display: block;
   opacity: 1;
 }
 #collection-580a9bee6a4963712b3646b8 .sqs-video-background iframe {
   display: none;
 }
}

This will remove the video on the specified page only. Let me know how you get on.

-Paul

Squarespace Expert & Professional Developer

Contributors to this forum voluntarily give their time to help you. If we correctly answer your question, please accept the answer by clicking Accept below it (you'll see it when you're logged on). If an answer doesn't help, feel free to ask for more help or wait for other forum users to add their comments and/or answers.

Whenever an accepted answer helps you, please vote it up using the up arrow on the right. This helps other forum users by giving them confidence in an answer.

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company helping Squarespace users by building the features that Squarespace didn't include.
Explore our range of Squarespace Extensions, including the Wishlist, and Datepicker Extension or book a Squarespace Expert for 1:1 help. Note that links in my posts may be affiliate links.

Link to post

Hi @Paul2009 ,

I'm having the same issue with my websitehttps://bodyform3d.squarespace.com/landing-page (password is: bodyform3d)

I don't want video on mobile, I want a white background, that I set up as the fallback image.

Any idea how to force that fallback image? I've used the code you mention, but not working on my site..

Thank you so much!

Link to post

Hi @Paul2009 ,

I'm having the same issue with my websitehttps://bodyform3d.squarespace.com/landing-page (password is: bodyform3d)

I don't want video on mobile, I want a white background, that I set up as the fallback image.

Any idea how to force that fallback image? I've used the code you mention, but not working on my site..

Thank you so much!

Link to post

The code above is for a specific page on a specific site because it includes a collection ID (#collection-580a9bee6a4963712b3646b8) from the site mentioned in the question. If you remove this element, it will work on similar sites.

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company helping Squarespace users by building the features that Squarespace didn't include.
Explore our range of Squarespace Extensions, including the Wishlist, and Datepicker Extension or book a Squarespace Expert for 1:1 help. Note that links in my posts may be affiliate links.

Link to post

Hi Paul,

I am trying to disable the video playing on a cover page when viewed on Mobile and force it to display the backup image?

Regards, Fraser

Link to post
  • 9 months later...
On 7/10/2019 at 2:01 PM, paul2009 said:

Hello

Squarespace don't control whether the background video is shown on mobile devices - it is controlled by your mobile's browser.

In the past, mobiles would not load background videos but this changed recently because newer devices are now powerful enough to display them and an increasing number of networks (4G/5G/WiFi) are fast enough too.

If you want to prevent them, you'll need some CSS. The CSS in your question is incorrect, so first you'll need to remove this. Then add the following (to Design > Custom CSS):



 

@media only screen and (max-width: 768px) {
 #collection-580a9bee6a4963712b3646b8 .sqs-video-background .custom-fallback-image {
   display: block;
   opacity: 1;
 }
 #collection-580a9bee6a4963712b3646b8 .sqs-video-background iframe {
   display: none;
 }
}
 

 

This will remove the video on the specified page only. Let me know how you get on.

-Paul

Squarespace Expert & Professional Developer

Contributors to this forum voluntarily give their time to help you. If we correctly answer your question, please accept the answer by clicking Accept below it (you'll see it when you're logged on). If an answer doesn't help, feel free to ask for more help or wait for other forum users to add their comments and/or answers.

Whenever an accepted answer helps you, please vote it up using the up arrow on the right. This helps other forum users by giving them confidence in an answer.

Hi Paul,

Would this work for 7.1 too?  Alternatively, is there a way to change the size of the mobile fallback image, as this looks distorted when displayed on mobile/smaller devices?

I can DM you the URL and password if required. 🙂

Many thanks in advance!

Link to post
  • 3 months later...

Hello,

i want to remove bg video only from desktop and want to show banner on mobile is that possible with SS GUI ?? i don't want to do it with custom code ?? please advice.

Link to post
2 hours ago, Muhammad__ said:

Hello,

i want to remove bg video only from desktop and want to show banner on mobile is that possible with SS GUI ?? i don't want to do it with custom code ?? please advice.

You can do it with custom code (Personal Plan)

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 2 weeks later...
On 7/10/2019 at 6:01 PM, paul2009 said:

Hello

Squarespace don't control whether the background video is shown on mobile devices - it is controlled by your mobile's browser.

In the past, mobiles would not load background videos but this changed recently because newer devices are now powerful enough to display them and an increasing number of networks (4G/5G/WiFi) are fast enough too.

If you want to prevent them, you'll need some CSS. The CSS in your question is incorrect, so first you'll need to remove this. Then add the following (to Design > Custom CSS):



 

@media only screen and (max-width: 768px) {
 #collection-580a9bee6a4963712b3646b8 .sqs-video-background .custom-fallback-image {
   display: block;
   opacity: 1;
 }
 #collection-580a9bee6a4963712b3646b8 .sqs-video-background iframe {
   display: none;
 }
}
 

 

This will remove the video on the specified page only. Let me know how you get on.

-Paul

Squarespace Expert & Professional Developer

Contributors to this forum voluntarily give their time to help you. If we correctly answer your question, please accept the answer by clicking Accept below it (you'll see it when you're logged on). If an answer doesn't help, feel free to ask for more help or wait for other forum users to add their comments and/or answers.

Whenever an accepted answer helps you, please vote it up using the up arrow on the right. This helps other forum users by giving them confidence in an answer.

Hi, @paul2009  I need help with my mobile banner. its cropping on mobile. please help.

here's the url:

Patientorator.com

Thanks in advance! 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...