Jump to content

how do I code in a different video for mobile vs Desktop?

Recommended Posts

  • Replies 11
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

You will need to upload the video on Squarespace to get the URL and then add a JavaScript code to change the default video link with the link for mobile(on mobiles).

What is the password to view the site?

Edited by sorca_marian
Link to comment
22 hours ago, GLOCK said:

Hi,

I am trying to display two videos one for desktop and one for mobile on my homepage.

How do change the views?

Thanks,

G

Add two videos on your website and share it. Then I can provide code to hide video mobile and desktop.

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
8 minutes ago, komunionstudio said:

site is published for the code. 

 

Thank you

Which video do you want to show on mobile and which video for desktop?

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
1 hour ago, komunionstudio said:

top video is desktop, bottom is mobile.

Add these code on Custom CSS panel in Website Utilities Website Tools > Custom CSS.

@media only screen and (max-width: 767px) {
  [data-section-id="6512ebcc9206c37c002f961d"] {
    display: none !important;
  }
}
@media only screen and (min-width: 768px) {
  [data-section-id="65a1aa517649c43c7f0dfe0b"] {
    display: none !important;
  }
}

 

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
On 1/22/2024 at 12:09 AM, weberdevelopment said:

I would like help with this too. I'd like to have a different background video play for mobile and for desktop. Is that possible?

You can use below code with this tool to find data section id

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

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
  • 2 weeks later...

I've been trying to do this in 7.1 but I haven't had any luck. I understand that the code needs to be copy/pasted in the Custom CSS of the page, but how does the page have to be set up? I was using video blocks to put in the desktop version and the mobile version on top of each other, is that where I'm going wrong?

Edited by Effect_Guy
Link to comment
On 2/8/2024 at 10:07 AM, Effect_Guy said:

I've been trying to do this in 7.1 but I haven't had any luck. I understand that the code needs to be copy/pasted in the Custom CSS of the page, but how does the page have to be set up? I was using video blocks to put in the desktop version and the mobile version on top of each other, is that where I'm going wrong?

You can share link to this page, we can check & give the code

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.