[Share] Show different Videos on Desktop – Mobile

This apply for Video Block Only. If you want to apply for Section - Video Background, you can follow this instead.

If you can't make it work, you can comment below with link to page where you use Video, I can check easier.

Quote

 

#1. First, you need to add 2 Video Blocks. Something like this

#2. Install Squarespace ID Finder (free tool)

https://chromewebstore.google.com/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

And find ID of 2 Videos.

In my example, we will have:

• #block-yui_3_17_2_1_1717495129514_95277
• #block-yui_3_17_2_1_1718020257422_1351

#3. Use this code to Custom CSS box

/* Hide video on desktop */
@media screen and (min-width:768px) {
  #block-yui_3_17_2_1_1718020257422_1351 {
    display: none;
  }
}
/* Hide video on mobile */
@media screen and (max-width:767px) {
  #block-yui_3_17_2_1_1717495129514_95277 {
    display: none;
  }
}

Thank you for your detailed feedback. This option seem to be the best in my case, but the problem is the Squarespace video upload limit is almost over and I have no more space to add videos directly with Video Blocks. That's why I am using the YT embed option. 

Anyway, I will remember this code in case I need it in the future.

Thank you,  @tuanphan

1 hour ago, AstonD said:

Thank you for your detailed feedback. This option seem to be the best in my case, but the problem is the Squarespace video upload limit is almost over and I have no more space to add videos directly with Video Blocks. That's why I am using the YT embed option. 

Anyway, I will remember this code in case I need it in the future.

Thank you,  @tuanphan

You can do similar with any blocks/sections, just replace Video Block ID in the code with Embed Block ID, or any block IDs.