Jump to content

Can I play a different background video for mobile?

Go to solution Solved by rwp,

Recommended Posts

3 hours ago, Pilinteriors said:

Tried uploading the code above but perhaps it needs to be specific to my site?

The code does need to be customized for each site.

Add the following to Design > Custom CSS.

/* hide bottom video on desktop */

@media screen and ( min-width : 768px ) {

  [data-section-id="639763f237130677c43c3f4d"] {
  
    display : none;
    
    }
    
  }

/* hide top video on mobile */

@media screen and ( max-width : 767px ) {

  [data-section-id="62e734c4b42a230e84ae93d3"] {
  
    display : none;
    
    }
    
  }

Check out Heather Tovey's most excellent looking Squarespace ID Finder to find the IDs for your site.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 1 month later...

My apologies for continuing to kick this topic down the road, but following along with this thread, and many others responded to by creedon, I'm still having a bit of trouble. 

I've generated two sections (desktop on top, mobile on bottom) with their own background videos and fallback images, but neither is hiding or swapping when resizing the window / accessing on mobile. My site is available at http://www.alessiosummerfield.com.

The code that I've tried is linked below: 

/* hide bottom video on desktop */
@media screen and ( min-width : 768px ) {

  [data-section-id="63ce7fec5026552f70e68d33"] {
  
    display : none;

    }
    
  }
/* hide top video on mobile */
@media screen and ( max-width : 767px ) {

  [data-section-id="63ce98311792970f43e60632"] {
  
    display : none;

    }

  }

I have been unable to find any data-section-id, but I've found data-collection-id or (using the Squarespace ID Finder that creedon linked to above, #block-63ce7fec5026552f70e68d33 and #block-63ce9e2e67856848516c1caf respectively). I've adjusted the code to read data-collection-id, as well as #block or .block or .data-collection-id to no avail. 

Any ideas what I may be doing wrong? I'm fairly low-level efficient when it comes to CSS and can mostly just intuit things from looking at context of code, but I'm awful in a vacuum. 

Thanks so much! Zero rush or pressure. 

Edited by acsummerfield
Formatting
Link to comment

Hi!

I'd like to have two background video's as well, could anyone help me with the code?

I've added both video's in seperate sections. Top of the page = browser video, second section = mobile video. I should add the code in the homepage header, correct? 

Here's my URL, I have a public site: plums-giraffe-9xkt.squarespace.com

Final question, if I later decide to replace/upload new background video's, do I need new code or doesn't that matter?

 

Would be great if anyone could help, thanks a lot! 

Francis

Link to comment
7 hours ago, Francisbelaen said:

I'd like to have two background video's as well, could anyone help me with the code?

Add the following to Page Settings > Advanced > Page Header Code Injection for the home page. Please see per-page code injection.

<style>

  @media screen and ( min-width : 768px ) {
  
    section[data-section-id="63b550bd8edf895790dd5a38"] {
    
      display : none;
      
      }
      
    }
    
  @media screen and ( max-width : 767px ) {
  
    section[data-section-id="63ce9d59b106223bdff0355f"] {
    
      display : none;
      
      }
      
    }
    
  </style>

 

Quote

if I later decide to replace/upload new background video's, do I need new code or doesn't that matter?

If you replace the already existing video in the sections the code should continue to work. If you add new sections then the code would need to be updated.

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
2 hours ago, creedon said:

Add the following to Page Settings > Advanced > Page Header Code Injection for the home page. Please see per-page code injection.

<style>

  @media screen and ( min-width : 768px ) {
  
    section[data-section-id="63b550bd8edf895790dd5a38"] {
    
      display : none;
      
      }
      
    }
    
  @media screen and ( max-width : 767px ) {
  
    section[data-section-id="63ce9d59b106223bdff0355f"] {
    
      display : none;
      
      }
      
    }
    
  </style>

 

If you replace the already existing video in the sections the code should continue to work. If you add new sections then the code would need to be updated.

Let us know how it goes.

Hey there, creedon! 

Is there any way to do this via the Custom CSS side of things? Sorry, I mentioned my situation just above Francisbelaen's post and am still having trouble. 

Thank you! 

Link to comment
20 hours ago, acsummerfield said:

Is there any way to do this via the Custom CSS side of things? Sorry, I mentioned my situation just above Francisbelaen's post and am still having trouble.

I suspect that part of your issue is the last couple of solutions I provided where for v7.1 sites. Your site is v7.0 using the Brine template family.

I actually took a brief look at your page yesterday and while I may be able to come up with some code to manipulate the index pages, the parallax effect seems to be interfering with things being displayed properly. Parallax is a tricky effect because it is manipulating elements in a specific way. If you just try to hide elements involved in that effect it goes wonky.

If you can turn off the parallax effect we may be able to get you somewhere.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
16 hours ago, creedon said:

I suspect that part of your issue is the last couple of solutions I provided where for v7.1 sites. Your site is v7.0 using the Brine template family.

I actually took a brief look at your page yesterday and while I may be able to come up with some code to manipulate the index pages, the parallax effect seems to be interfering with things being displayed properly. Parallax is a tricky effect because is is manipulating elements in a specific way. If you just try to hide elements involved in that effect it goes wonky.

If you can turn off the parallax effect we may be able to get you somewhere.

Understood! I've gone ahead and killed the parallax effect. 

Is there a simple way for me to upgrade to a v7.1 site? I've hosted my site via Squarespace for quite some time, but am still somewhat green with the intricacies of the platform. 

Thank you very much for your time! 

Link to comment
3 hours ago, acsummerfield said:

I've gone ahead and killed the parallax effect.

I'll take a look to see what I might be able to come up with.

Quote

Is there a simple way for me to upgrade to a v7.1 site?

SS does not provide an automatic process to upgrade to v7.1. If you like your site then there is no reason to move to v7.1, of course with the understanding that some of the solutions to issues you see in the forum may be v7.1 only.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
Quote

I'll take a look to see what I might be able to come up with.

Here is a start on some code. Add the following to Page Settings > Advanced > Page Header Code Injection for the Index page. Please see per-page code injection.

<style>

  /* hide bottom video on desktop */
  
  @media screen and ( min-width : 768px ) {
  
    #new-page-1 {
    
      display : none;
      
      }
      
    }
    
  /* hide top video on mobile */
  
  @media screen and ( max-width : 767px ) {
  
    #new-page {
    
      display : none;
      
      }
      
    }
    
  </style>

Let us know how it goes.

Edited by creedon
added style tags

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
44 minutes ago, acsummerfield said:

I only have a Personal account, so I cannot add any code injections via the Advanced Page Settings. 

Sure. Add the code to Design > Custom CSS removing the <style> and </style> lines ( which I added because I forget them when I put the code up ).

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
3 minutes ago, creedon said:

Sure. Add the code to Design > Custom CSS removing the <style> and </style> lines ( which I added because I forget them when I put the code up ).

Thanks so much! It appears to be working much better than it was before, but I'm still encountering some oddities. More than happy to workshop on my own, but wanted to see if anything came to mind for you on first glance. 

Fullscreen on an FHD monitor, site looks good. Browser resized down to a sort of rough tablet estimate, it plays fine, except there's clearly a backplate filling in at the top and bottom (like a letterboxing effect). However, accessing on a mobile browser, I just see a small version of the backup image. 

The mobile video (bottom of the two spaces) is formatted perfectly for a mobile display, so I'm not sure what's causing the odd hitch. 

Zero rush, I'll poke around, just wasn't sure if you would be familiar with the quirk. 

Thank you very very much! 

Link to comment
52 minutes ago, acsummerfield said:

I'm still encountering some oddities. More than happy to workshop on my own, but wanted to see if anything came to mind for you on first glance.

I don't have specific solutions but some observations.

I took the viewport to 767px for a tablet kind of width.

232718357_ScreenShot2023-01-25at2_20_08PM.png.aeb8f6098cbf596813bdb2010d1fff57.png

The red area is the body background. The green is the footer background. One possible solution would be to manipulate those backgrounds with some CSS at the appropriate break point to get a better effect. It could be a solid color or you might use images. The solid color would be a fairly easy first pass.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
15 minutes ago, creedon said:

The red area is the body background. The green is the footer background. One possible solution would be to manipulate those backgrounds with some CSS at the appropriate break point to get a better effect. It could be a solid color or you might use images. The solid color would be a fairly easy first pass.

Good thinking! Thank you very much. 

I appreciate all of the help! 

Link to comment
  • 7 months later...

Hi, im trying to add alternate mobile and desktop video banners and having trouble with the code, can someone help?

Im using the following in the page settings - page header injections 

<style>
@media screen and ( max-width : 767px ) {
[data-section-id="64f5a7264f39e02a98d3cc42"] {
    display : none ! Important;
    }
  }
@media screen and ( min-width : 768px ) {
 [data-section-id="645a5771a9fcec01afb17139"] {
    display : none! Important;
    }    
  }
<style>

You can see the page here https://www.bumphaus.com/home-1

 

 

Link to comment
On 9/4/2023 at 5:26 PM, thephase51 said:

Hi, im trying to add alternate mobile and desktop video banners and having trouble with the code, can someone help?

Im using the following in the page settings - page header injections 

<style>
@media screen and ( max-width : 767px ) {
[data-section-id="64f5a7264f39e02a98d3cc42"] {
    display : none ! Important;
    }
  }
@media screen and ( min-width : 768px ) {
 [data-section-id="645a5771a9fcec01afb17139"] {
    display : none! Important;
    }    
  }
<style>

You can see the page here https://www.bumphaus.com/home-1

 

 

I see you solved with this code?

<style>
  
  /* homepage video hide desktop */
  
  @media screen and ( max-width : 767px ) {
  
    html:not( .squarespace-damask ) [data-section-id="645a5771a9fcec01afb17139"] {
    
      display : none;
      
      }
      
    }
    
  /* homepage video hide mobile */
  
  @media screen and ( min-width : 768px ) {
  
    html:not( .squarespace-damask ) [data-section-id="64f5a7264f39e02a98d3cc42"] {
    
      display : none;
      
      }
      
    }
    
  </style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
On 10/20/2023 at 3:43 PM, ileohdez said:

Hii, 

I have the same issue; I would like to adapt my video background for mobile. The website is: https://amphibian-gopher-jwdm.squarespace.com/, and its password: Mad

Could you pleaseeee help me? 😞

You can add 2 sections with different video, then use this code to Website Tools (under Not Linked) > Custom CSS

/* Homepage - Show First Section on Desktop */
@media screen and (min-width:768px) {
/* this code will hide second section */
	body.homepage article section:nth-child(2) {
		display: none;
}
}
/* Homepage - Show Second Section on Mobile */
@media screen and (max-width:767px) {
/* this code will hide first section */
	body.homepage article section:nth-child(1) {
		display: none;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 months later...

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.