How do I swap a video background on mobile?

Site URL: https://beagle-tangerine-ex9m.squarespace.com

Hi there,

I have 2 video backgrounds on my homepage that get the edges cropped out when viewed on mobile, I was hoping someone could help me with the code for either

A) to swap out the video background for a different video or image, when on mobile using a media query.

B) Have the video contained to the edges of the device, when viewed on mobile.

My site is: https://beagle-tangerine-ex9m.squarespace.com

Password: digitalnative

Thank you,

Sarah

Mobile >

Desktop >

Hi. You mean homepage header video?

Hi Tuanphan,

Thank you so much for responding!

Yes the header video and the video background on the third section from the top.

I've managed to swap out the header video for a gif - but i'd rather know how to swap for a video.

As when i swap the other video (section 3) for a gif the height of the section is too high (this is large section height on desktop version).

Sorry if thats confusing, essentially my questions are:

1) Is there a way to swap the videos to different video on mobile?

2) and also if i run into issues with section height, is there code where i can reduce the height/padding of the section on mobile?

Thank you,

Sarah

23 hours ago, tuanphan said:

Hi. You mean homepage header video?

Hi Tuanphan,

Thank you so much for responding!

Yes the header video and the video background on the third section from the top.

I've managed to swap out the header video for a gif - but i'd rather know how to swap for a video.

As when i swap the other video (section 3) for a gif the height of the section is too high (this is large section height on desktop version).

Sorry if thats confusing, essentially my questions are:

1) Is there a way to swap the videos to different video on mobile?

2) and also if i run into issues with section height, is there code where i can reduce the height/padding of the section on mobile?

Thank you,

Sarah

You want to

• Change to another video on mobile
• OR resize video fullsize on mobile?

On 12/15/2020 at 3:30 AM, tuanphan said:

You want to

• Change to another video on mobile
• OR resize video fullsize on mobile?

Hi Tuanphan,

If its possible to swap the video for another one (resized) that would be excellent!

Currently i have it swapped out for a GIF but due to quality i'd prefer to swap for a different video.

Thank you,

Sarah

On 12/18/2020 at 8:44 PM, sarahgilchrist said:

Hi Tuanphan,

 

If its possible to swap the video for another one (resized) that would be excellent!

 

Currently i have it swapped out for a GIF but due to quality i'd prefer to swap for a different video.

 

Thank you,

 

Sarah

You can add 2 videos, then share url, we will give code to show 1 on desktop, show 1 on mobile

I'm having the same issue and I want to add a different (or resized) video on mobile. I went to the OP's website and saw that the issue looked to be sorted out. Can you share the code for this? Thanks!

On 12/25/2020 at 5:58 AM, ameliaM20 said:

I'm having the same issue and I want to add a different (or resized) video on mobile. I went to the OP's website and saw that the issue looked to be sorted out. Can you share the code for this? Thanks!

Hi. You can add 2 videos, then share url, we will give code to show 1 on desktop, show 1 on mobile

@tuanphancould you please share the code for doing this swap so that one video will show on desktop and one different video will show on mobile please? 

21 hours ago, marcoammannati said:

@tuanphancould you please share the code for doing this swap so that one video will show on desktop and one different video will show on mobile please? 

You need to insert videos first. If you don't add video, we can't see code to check.

Hi there, so, to clarify, There is a video playing in the Home of http://www.peggypictures.com . Since this video has some motion graphics (large outlined words as you can see) placed over footage, this works well in landscape so on desktop it's fine, but on mobile I have 2 problems:
1. The video doesn't even seem to load once live, so it defaults to the "fall back" image
2. If it did display it, it would default crop the sides so the words would be chopped off. 
So to circumnavigate the problem at point 2 above I am trying to figure out if I could create a SEPARATE video, that is having the motion graphics smaller in the frame, to fit the proportion, and to inject some code that tells the mobile responsive site to pick up that video instead of the other vimeo link for the desktop. I am also wondering if the best way forward for this would be for me to create a portrait video for mobile use, i.e. a 1080 px wide by 1920 px tall so it's already the size that fits a mobile phone best. I am assuming this is the best solution but please let me know if I am wrong. Here is the link to the video in portrait for mobile 

@tuanphan
 

Looking forward to hear from you, here are both videos:

VIDEO FOR DESKTOP

VIDEO FOR MOBILE

On 1/25/2021 at 6:40 AM, marcoammannati said:

@tuanphan
 

Looking forward to hear from you, here are both videos:

VIDEO FOR DESKTOP

 

 

VIDEO FOR MOBILE

You want to hide 1 video on mobile, hide 1 on desktop?

Hi there, 
I am wanting to do this. 

So use a 16x9 video for desktop  and the 4x5 for mobile. 
What is the code for this? Does anyone know or could help. 

I am inserting this into my Banner. Header. 


So exactly this:
----------------
 

21 hours ago, moxxbrands said:

Hi there, 
I am wanting to do this. 

So use a 16x9 video for desktop  and the 4x5 for mobile. 
What is the code for this? Does anyone know or could help. 

I am inserting this into my Banner. Header. 


So exactly this:
----------------
 

You can add 2 videos, then share url, we will give code to show 1 on desktop, show 1 on mobile

 

 

If you added 2 videos, you can share site url, we can check code easier

Where can you add a second video? This is all I see in the inspector.

43 minutes ago, bzabka said:

Where can you add a second video?

You create two sections. Each section has one background video. Then with CSS and/or Javascript you show or hide each section based on being on desktop or mobile.

On 12/21/2021 at 5:03 AM, creedon said:

You create two sections. Each section has one background video. Then with CSS and/or Javascript you show or hide each section based on being on desktop or mobile.

Hello! Do you guys have the code? I am wanting to do this exact thing, and I cannot find the answer anywhere! Thank you 🙂

6 hours ago, HandegardArkitektur said:

Do you guys have the code? I am wanting to do this exact thing, and I cannot find the answer anywhere!

I realize this thread is probably frustrating.

The issue is that no one has followed through with our instructions, at least in thread, so that we can get to a point of showing some code.

This is also frustrating for us because we keep trying to help and no one lets us get to an end.

So to reiterate. We need two videos. Either in blocks or as two page sections with background videos. We need to be able to see the page where these videos are. Once we have those we may be able to show some code. Again we can't say until we can see the page. Also we need to know which video is which, desktop or mobile.

On 6/29/2022 at 8:04 PM, creedon said:

I realize this thread is probably frustrating.

The issue is that no one has followed through with our instructions, at least in thread, so that we can get to a point of showing some code.

This is also frustrating for us because we keep trying to help and no one lets us get to an end.

So to reiterate. We need two videos. Either in blocks or as two page sections with background videos. We need to be able to see the page where these videos are. Once we have those we may be able to show some code. Again we can't say until we can see the page. Also we need to know which video is which, desktop or mobile.

Hi @creedon! Sorry for bumping such an old thread; I'm looking to do the same as the others in here, but I'm going to try to buck the trend of this topic so far.

My site is [SITE URL REMOVED] and I've created two identical homepage header sections, except one has a landscape video (for desktop) and one has a portrait video (for mobile). Hopefully this is what you need to be able to help, or anyone else!

Will the code affect my ability to be able to change the videos themselves in the future?

Thanks for your time.

On 11/15/2022 at 8:53 AM, atwalkers said:

I'm looking to do the same as the others in here, but I'm going to try to buck the trend of this topic so far.

You have given me everything I need to make some code! 🙂

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

<style>

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

Alternately you can add the code to Design > Custom CSS, being sure to remove the HTML style tags.

On 11/15/2022 at 8:53 AM, atwalkers said:

Will the code affect my ability to be able to change the videos themselves in the future?

No. The code will not be active in Preview but can be seen by visitors to your site. You can see the effect by using Private browsing.

Let us know how it goes.

7 hours ago, creedon said:

You have given me everything I need to make some code! 🙂

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

/* homepage video hide desktop */

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

  html:not( .squarespace-damask ) [data-section-id="634818e46de1c02fba143f25"] {
  
    display : none;
    
    }
    
  }

/* homepage video hide mobile */

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

  html:not( .squarespace-damask ) [data-section-id="6373c175022e3772bf52b7dc"] {
  
    display : none;
    
    }
    
  }

Alternately you can add the code to Design > Custom CSS.

No. The code will not be active in Preview but can be seen by visitors to your site. You can see the effect by using Private browsing.

Let us know how it goes.

Amazing, I’ll give this a shot. Thank you so much for your help!

18 hours ago, creedon said:

You have given me everything I need to make some code! 🙂

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

/* homepage video hide desktop */

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

  html:not( .squarespace-damask ) [data-section-id="634818e46de1c02fba143f25"] {
  
    display : none;
    
    }
    
  }

/* homepage video hide mobile */

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

  html:not( .squarespace-damask ) [data-section-id="6373c175022e3772bf52b7dc"] {
  
    display : none;
    
    }
    
  }

Alternately you can add the code to Design > Custom CSS.

No. The code will not be active in Preview but can be seen by visitors to your site. You can see the effect by using Private browsing.

Let us know how it goes.

Hi again! Adding the code to the Page Header Code Injection didn't work for me; the code just sits above the header. When I put other HTML in the box, it seems to work fine. Was I doing something wrong?

Either way, adding the code to the Custom CSS worked perfectly, so problem solved!

9 hours ago, atwalkers said:

Adding the code to the Page Header Code Injection didn't work for me; the code just sits above the header.

My bad I forgot to include the HTML style tag in the code I posted. I have updated it.