Can I play a different background video for mobile?

On 4/15/2021 at 9:39 AM, joshroos said:

@tuanphan Where should I host the 2nd video? It's on Vimeo, does it need to be embedded into my site?

What I am trying to achieve is to have one video (full-res) play on desktop, and the same video (but compressed) so it loads quicker and easier on mobile. 

 

 

@tuanphanany update on how to make this work and where I should host the 2nd video?

On 4/16/2021 at 1:41 AM, tuanphan said:

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

Or if 2 videos make page slowly loading, we can use code to redirect to new page on mobile only?

How does one do this? 

On 9/16/2021 at 5:42 PM, moxxbrands said:

How does one do this? 

You mean you can't add 2 videos??

On 9/19/2021 at 9:25 PM, tuanphan said:

You mean you can't add 2 videos??

Yes. 

Had do I add two video's. One for desktop and mobile. 

--------------

Code wise. What am I needing to use? So: Desktop shows 9x16 and Mobile shows 4x5.

It wasn't resolved in the thread in the end so wanted to ask how do you you actually implement it. 

Does that make sense? 

 

On 9/21/2021 at 5:38 AM, moxxbrands said:

 

Yes. 

Had do I add two video's. One for desktop and mobile. 

--------------

Code wise. What am I needing to use? So: Desktop shows 9x16 and Mobile shows 4x5.

It wasn't resolved in the thread in the end so wanted to ask how do you you actually implement it. 

Does that make sense? 

 

Hi,

Can you duplicate the site & add me as an admin there? I will take a look.

Message me to get an email

I also cannot add 2 videos. Thoughts?

@bzabka

Please see the following.

@creedon Got it. I have everything ready to go. What do you need from me to receive the code. 

Many thanks in advance.

28 minutes ago, bzabka said:

What do you need from me to receive the code.

Please post the URL for a page on your site where we can see your issue. Also tell us which video is for desktop and which for mobile.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

@creedon

www.brianzabka.com

The first section should remain on desktop but disappear on mobile.

The second section should be all that appears on mobile.

Many thanks

On 12/21/2021 at 11:06 AM, bzabka said:

The first section should remain on desktop but disappear on mobile.

Add the following to Design > Custom CSS.

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

  [data-section-id="61c0e880a53f5926166f0e2a"] {
  
    display : none;

    }

  }

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

  [data-section-id="61c222336b6e3f1b34e1e3f5"] {
  
    display : none;

    }
    
  }

This is for v7.1 and specific to the poster's need.

Let us know how it goes.

@creedon

It worked. Many thanks for your time and assistance. I really appreciate it.

On 12/22/2021 at 8:19 PM, creedon said:

Add the following to Design > Custom CSS.

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

  [data-section-id="61c0e880a53f5926166f0e2a"] {
  
    display : none;

    }

  }

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

  [data-section-id="61c222336b6e3f1b34e1e3f5"] {
  
    display : none;

    }
    
  }

This is for v7.1 and specific to the poster's need.

Let us know how it goes.

Hi @creedon

I've used the same code here and updated the CSS with the relevant Data Section ID for both videos, but unfortunately hasn't seemed to work on mine. I also previously tried a code another member posted earlier in this thread, but hasn't worked either. 

To clarify, i'm hoping to hide the 1st video (in the top section) when viewing on mobile. 

My site isn't live but can be accessed here:

https://flatworm-mackerel-dgm3.squarespace.com/

PW - socialseason

Please let me know if you can advise, many thanks. 

@Adam9

It appears you have several issues going on.

First I'm not seeing two page sections. I'm seeing two, what appear to be duplicate, code blocks within one page section. So the code posted here will not work for that. However the general technique of hiding/showing can be applied to blocks but we'd need to know whether you want to manipulate page sections or code blocks.

Second the code in the code block appears to be malformed causing a bunch of errors in the page. Here is what I'm seeing. I've tweaked the formatting a bit to make it easier to read.

<a href="https://laidbaremusic.com/community">

  <img
  
    src="https://static1.squarespace.com/static/5ff5e41a2e5d733729a695b8/t/60b67be84befde1ce9730ba4/1622572009541/COMMUNITY+HOVER.jpeg"
    
    onmouseover="this.src='https://static1.squarespace.com/static/5ff5e41a2e5d733729a695b8/t/6009b3125d3e732c068ae487/1611248408694/COMMUNITY.jpg'"
    
    onmouseout="this.src='https://static1.squarespace.com/static/5ff5e41a2e5d733729a695b8/t/60b67be84befde1ce9730ba4/1622572009541/COMMUNITY+HOVER.jpeg'"
    
    >

The code is missing a closing anchor tag.

I think the code should be...

<a href="https://laidbaremusic.com/community">

  <img
  
    src="https://static1.squarespace.com/static/5ff5e41a2e5d733729a695b8/t/60b67be84befde1ce9730ba4/1622572009541/COMMUNITY+HOVER.jpeg"
    
    onmouseover="this.src='https://static1.squarespace.com/static/5ff5e41a2e5d733729a695b8/t/6009b3125d3e732c068ae487/1611248408694/COMMUNITY.jpg'"
    
    onmouseout="this.src='https://static1.squarespace.com/static/5ff5e41a2e5d733729a695b8/t/60b67be84befde1ce9730ba4/1622572009541/COMMUNITY+HOVER.jpeg'"
    
    >
    
  </a>

Thanks for taking a look @creedon

I'm wondering if my link took you to the correct page? The code blocks were actually on a different page where I was trying something else (that you've actually helped me out with!).

The two relevant videos are on the Homepage, which I have now added to the Main Navigation to (hopefully) make things clearer. 

To clarify, I am hoping to display one on Desktop and the other on Mobile. The second video at the moment is just a 'holding' video while I wait and see if this is going to work for me. 

Thanks again.. 

@Adam9

The URL <  https://flatworm-mackerel-dgm3.squarespace.com/ > you gave me originally is what Squarespace thinks is the home. The second URL you gave me is named home but is not the home page.

I looked at the second URL and found that you have a syntax error in your Custom CSS.

_______ _______ _______ _______ __ | || || || || | | _ || _ || _ || _____|| | | | | || | | || |_| || |_____ | | | |_| || |_| || ___||_____ ||__| | || || | _____| | __ |_______||_______||___| |_______||__| Line Statement --------------- In 'site custom less': 33 34
}

35 36 https://static1.squarespace.com/sta ... al-season-bookings-dj-girl-cap.png 37 ... https://static1.squarespace.com/static/6171821bf2ba744781ff0025/t/617e7b67 .........^ SyntaxError INCOMPLETE_PARSE Unable to complete parse.

That will need to be fixed before we can go further.

On 1/7/2022 at 4:47 AM, Adam9 said:

but unfortunately hasn't seemed to work on mine.

Please try the following.

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

  [data-section-id="61d5dbdf5bd8f328394d335e"] {
  
    display : none;

    }

  }

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

  [data-section-id="61d8299cf4ec2f2d863a15df"] {
  
    display : none;

    }
    
  }

Also I suggest adding the following code. It can prevent unexpected padding issues when hiding/showing the first page section.

Let us know how it goes.

H there,

I have a fullscreen video at the top section of my page, and would like to display a different version (9:16) of the video on mobile. 

https://indigo-orange-m8b2.squarespace.com/

pw: websitesorted123

Any help appreciated, thank you!

On 1/13/2022 at 8:53 PM, sblacker said:

H there,

I have a fullscreen video at the top section of my page, and would like to display a different version (9:16) of the video on mobile. 

https://indigo-orange-m8b2.squarespace.com/

pw: websitesorted123

Any help appreciated, thank you!

Add to Design > Custom CSS > Then save & reload the site

/* Mobile video */
@media screen and (max-width:767px) {
[data-section-id="6182cc04d1096334c6e6140a"] iframe {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}

[data-section-id="6182cc04d1096334c6e6140a"] {
    min-height: unset !important;
}
}

Thank you - much appreciated!

Hello...I bet you're tired of answering this one!

I too need to be able to play a different background video on mobile than the one displayed on desktop. I have duplicated the top section from my homepage, plus I've replaced the background video with one that is portrait (9:16), as someone else was instructed to earlier in the thread.

The top one is for desktop ONLY and the bottom one is for mobile ONLY.

My site is currently under construction and the URL is: orb-caterpillar-zl6x.squarespace.com

The site-wide password is: Pl3as3H3lp

Your help will be hugely appreciated.

Big thanks in advance!

19 hours ago, Papa_Gee said:

Hello...I bet you're tired of answering this one!

I too need to be able to play a different background video on mobile than the one displayed on desktop. I have duplicated the top section from my homepage, plus I've replaced the background video with one that is portrait (9:16), as someone else was instructed to earlier in the thread.

The top one is for desktop ONLY and the bottom one is for mobile ONLY.

My site is currently under construction and the URL is: orb-caterpillar-zl6x.squarespace.com

The site-wide password is: Pl3as3H3lp

Your help will be hugely appreciated.

Big thanks in advance!

Add to Design > Custom CSS

/* hide bottom video on desktop */
@media screen and (min-width:768px) {
[data-section-id="61efe46d3429967472ec203a"] {
    display: none;
}
}
/* hide top video on mobile */
@media screen and (max-width:767px) {
[data-section-id="61e82dd26345d74a8f5eccab"] {
    display: none;
}
}

1 hour ago, tuanphan said:

Add to Design > Custom CSS

/* hide bottom video on desktop */
@media screen and (min-width:768px) {
[data-section-id="61efe46d3429967472ec203a"] {
    display: none;
}
}
/* hide top video on mobile */
@media screen and (max-width:767px) {
[data-section-id="61e82dd26345d74a8f5eccab"] {
    display: none;
}
}

 

WOW! That is absolutely amazing. You guys are geniuses. Thanks so much.

Also...While I have you...How do prevent line-breaks from happening in the Navigation bar when on narrower browser screen?

23 hours ago, Papa_Gee said:

Also...While I have you...How do prevent line-breaks from happening in the Navigation bar when on narrower browser screen?

 

Use this CSS

nav.header-nav-list {
    flex-wrap: nowrap;
}