Can I play a different background video for mobile?

I have a YouTube background video that doesn't look great on mobile.

Can I use a completely different YouTube video as the background video on mobile?

Need a link to your page to help.

You can add 2 background video, then we can give the code to hide 1 on desktop, hide 1 on mobile

That sounds interesting. Site isn't published yet.

Not sure how to show what I have unpublished?

@tuanphan has a link in his signature on how to set the page up to share.

Got it, thanks.

https://helicon-pepper-zje7.squarespace.com/config/settings

pubby

Duplicate your section and change the video, once you have this done we can give you the code to only show one of the two, depending on the screen size.

Ok, done.

Thanks for the responses so far!

Thanks rwp!!

That's awesome!!!

On a related note, on that same page, the mobile font isn't exactly how I want it to be.

I have this code below in my Custom CSS that does a nice job of reducing the title font for mobile, but it doesn't appear to affect the top 2 words of the title ('South Florida'). Also, that text is within a markdown box, which is perhaps a part of my issue?

@media screen and (max-width:640px) {
h3 span {font-size: 36px !important;}
}

Thanks rwp!!

That's awesome!!!

Also, how do I do this on more than one page?

And on a related note, on that same page, the mobile font isn't exactly how I want it to be.

I have this code below in my Custom CSS that does a nice job of reducing the title font for mobile, but it doesn't appear to affect the top 2 words of the title ('South Florida'). Also, that text is within a markdown box, which is perhaps a part of my issue?

@media screen and (max-width:640px) {
h3 span {font-size: 36px !important;}
}

The South Florida part of the text is not in the span, which is what you targeted with the css.

You would need to do:

@media screen and (max-width:640px) {
	h3,
	h3 span {
		font-size: 36px !important;
	}
} 

Thanks!

Is there a way to make 'South Florida' one size, and the rest a different size?

Sure. The #block will only change Florida, the rest is what you had before.

@media screen and (max-width:640px) {
	#block-yui_3_17_2_1_1600516236805_10107 h3 {
		font-size: 56px !important;
	}

	h3 span {
		font-size: 36px !important;
	}
} 

That doesn't seem to be working for me.

This is my whole Custom CSS right now:

@media screen and (max-width:640px) {
    #block-yui_3_17_2_1_1600516236805_10107 h3 {
        font-size: 56px !important;
    }

    h3 span {
        font-size: 36px !important;
    }
}  

@media screen and (max-width:1024px) {
  [data-section-id="5f5beacf1cb1680c6b76bcb1"] {
    display: none !important;
  }
}

@media screen and (min-width:1025px) {
  [data-section-id="5f7104719344cd07a2ef3145"] {
    display: none !important;
  }
}

I fell for my own trick........ It doesn't work because the other section is visible on mobile, for the video background.

This will work. Replace this line:

#block-yui_3_17_2_1_1600516236805_10107 h3 {

With this:

#block-a89aabdb6864ee5ef820 h3 {

Thanks! That did the trick!

And to tempt fate...

How could I do the hidden video trick for 2 more pages?

Now I have dual video sections on the 'Services' and the 'About' pages. Hoping to make the lower video sections only for mobile.

Your code is great, but a bit obtuse for my brain to reverse engineer.

Help please thank you!

Hi I am a complete newbie with no code experience and am having the same issue.  I have tried to follow the instructions above but it doesn't seem to be working for me.  Can anyone help me please?

You need to get the data section id for the sectors that you are working with. They are specific to each section.

Hello, I'm also trying to do the 2 videos on my homepage and only show 1 for mobile / 1 for desktop. I have those videos ready on the page and just need the custom code -- how do I share a private link for someone to help here?

@rba

Please post the URL for your site.

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.

We can then take a look at your issue.

@creedon @rwp @tuanphan

Trying to do the same thing here, one background video that loads for desktop (this is already on my site) and a different compressed version that loads for mobile. 

Site is : roosbrothers.com

What code is necessary to do so and where should I host the mobile background video?

Thanks!

22 hours ago, joshroos said:

@creedon @rwp @tuanphan

Trying to do the same thing here, one background video that loads for desktop (this is already on my site) and a different compressed version that loads for mobile. 

Site is : roosbrothers.com

What code is necessary to do so and where should I host the mobile background video?

Thanks!

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?

On 4/15/2021 at 7: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?

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