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

I want to have a two different videos for my website. One for desktop and one for mobile as they need to look different? Can you help?

jch.squarespace.com

I duplicated the section and have one with a mobile version and 1 desktop.

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?

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.

site is published for the code. 

Thank you

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?

top video is desktop, bottom is mobile.

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

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?

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

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?

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

I am trying to do the same for my website. I have a mobile and desktop versions of my video.

I tried to mimic your tutorial but I have still an issue.

I've inserted in the custom css: 

@media only screen and (max-width: 767px) {
  [data-section-id="6516e6178ef7dc6714b3c9dd"] {
    display: none !important;
  }
}
@media only screen and (min-width: 767px) {
  [data-section-id="6658e047182aaa1310e0dc9f"] {
    display: none !important;
  }
}

(using the Chrome extension, I think the mobile video is 6658e047182aaa1310e0dc9f (you can see it in that page: https://perch-sawfish-jbj7.squarespace.com/home-1),  the desktop is 6516e6178ef7dc6714b3c9dd)

It seems to display the right video for desktop, and the right video for mobile, but it adds a large blank padding on top of the mobile video. How can I fix it?

Thanks a lot for your help!

On 5/31/2024 at 3:28 AM, Letycia said:

I am trying to do the same for my website. I have a mobile and desktop versions of my video.

I tried to mimic your tutorial but I have still an issue.

I've inserted in the custom css: 

@media only screen and (max-width: 767px) {
  [data-section-id="6516e6178ef7dc6714b3c9dd"] {
    display: none !important;
  }
}
@media only screen and (min-width: 767px) {
  [data-section-id="6658e047182aaa1310e0dc9f"] {
    display: none !important;
  }
}

(using the Chrome extension, I think the mobile video is 6658e047182aaa1310e0dc9f (you can see it in that page: https://perch-sawfish-jbj7.squarespace.com/home-1),  the desktop is 6516e6178ef7dc6714b3c9dd)

It seems to display the right video for desktop, and the right video for mobile, but it adds a large blank padding on top of the mobile video. How can I fix it?

Thanks a lot for your help!

The url doesn't work. Can you check again?

and min-width should be 768px, not 767

Sorry, here it is https://www.contradancecompany.com/

On 7/7/2024 at 10:31 PM, Letycia said:

Sorry, here it is https://www.contradancecompany.com/

I see your code already worked here, if you have any other problems, you can let me know.

When I add the block code to the second section of code it makes the section disappear?
Here is the code I'm using:

.product-quantity-input {
    display: none !important;
}
.sqs-add-to-cart-button-wrapper {
    display: none !important;
}
.ProductItem-product-price {
    display: none !important;
}
@media only screen and (max-width: 768px) {
  [data-section-id="6658e047182aaa1310e0dc9f"] {
    display: none !important;
  }
}
@media only screen and (min-width: 768px) {
  [data-section-id="66b25d84fd89ca22baaf9192"] {
    display: none !important;
  }
}
#block-yui_3_17_2_1_1723566008258_17298.video-block .video-player{
padding-bottom:120%
}

6 hours ago, heatnot said:

When I add the block code to the second section of code it makes the section disappear?
Here is the code I'm using:

.product-quantity-input {
    display: none !important;
}
.sqs-add-to-cart-button-wrapper {
    display: none !important;
}
.ProductItem-product-price {
    display: none !important;
}
@media only screen and (max-width: 768px) {
  [data-section-id="6658e047182aaa1310e0dc9f"] {
    display: none !important;
  }
}
@media only screen and (min-width: 768px) {
  [data-section-id="66b25d84fd89ca22baaf9192"] {
    display: none !important;
  }
}
#block-yui_3_17_2_1_1723566008258_17298.video-block .video-player{
padding-bottom:120%
}

Can you share link to page?