Jump to content

Different video for background on mobile and desktop?

Recommended Posts

  • Replies 6
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

  • 4 weeks later...
On 3/20/2023 at 5:06 PM, tuanphan said:

Hi,

You can add 2 sections with 2 videos, then share link to your site, we can give code to show 1 on desktop, show another on mobile

You need to do this first then share url, we can help easier

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
  • 9 months later...
On 1/25/2024 at 11:45 PM, elliecp said:

I'm having this same issue. Please could you share this code with us?

Because you don't share url, so we can't check ID of section, so you can use this way (require a Business Plan or higher)

First, use this code to Website > Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('.hide-on-desktop').closest('section.page-section').addClass('hide-on-desktop');
      $('.hide-on-mobile').closest('section.page-section').addClass('hide-on-mobile');
});
</script>

And use this code to Website Tools > Custom CSS

@media screen and (min-width:768px) {
 section.hide-on-desktop {
     display: none !important;
   }}
 @media screen and (max-width:767px) {
 section.hide-on-mobile{
     display: none !important;
   }
 }

Next, add 2 sections with 2 videos

To hide 1 section on desktop, edit that section > Add a Block > Choose Code > Paste this code

<div class="hide-on-desktop"></div>

and to hide another section on mobile, use this Code Block

<div class="hide-on-mobile"></div>

 

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

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.