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

Can I play a different background video for mobile?

DrMSacks

Asked by DrMSacks,

Followers 4
Go to solution Solved by rwp,

Question

  • Answers 19
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

Popular Posts

rwp

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

rwp

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_

19 answers to this question

Recommended Posts

  • 0

rwp    281

rwp
  • Solution
Posted 
@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;
  }
}

 

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0

rwp    281

rwp
Posted

Need a link to your page to help.

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0

tuanphan    8,246

tuanphan
Posted

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

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
  • 0

rwp    281

rwp
Posted

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

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0

rwp    281

rwp
Posted

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.

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0

DrMSacks    0

DrMSacks
  • Author
Posted

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;}
}

Link to post
  • 0

DrMSacks    0

DrMSacks
  • Author
Posted

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;}
}

Link to post
  • 0

rwp    281

rwp
Posted

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;
	}
}

 

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0

rwp    281

rwp
Posted

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;
	}
}

 

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0

DrMSacks    0

DrMSacks
  • Author
Posted

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;
  }
}

Link to post
  • 0

rwp    281

rwp
Posted

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 {

 

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0

DrMSacks    0

DrMSacks
  • Author
Posted (edited)

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!

Edited by DrMSacks
grammar
Link to post
  • 0

Space21    0

Space21
Posted

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?

 

Link to post
  • 0

rwp    281

rwp
Posted

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

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post

Create an account or sign in to comment

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

Sign Up / Login
Followers 4
Go to question listing
×
×
  • Create New...

Support

Community

Developers

Resources