Adding video/motion clips to Portfolio Gallery ? and lack of options for Creatives, galleries..

Hi, Is there any way with code to add short video clip loops to a Portfolio gallery ? 

I've read lots of other similar requests, some say it's possible with code - but I've not seen an actual code solution reply. 
This is a must have in 2024 for professional creatives - photographers, animators, graphic designers & illustrators . We are all being asked to make motion content these days and we need to be able to present that alongside stills. 

I am getting more and more frustrated with SQsp , not putting much effort, vision, options and controls for creative galleries.
- They are passing the buck to the community & freelance developers to add basics that we should have in gallery controls & settings. 
-also this forces us to buy the next level up subscription to allow css. Where most of creatives just need a simple and customisable & elegant solution of a few pages and galleries. 

It appears they are more focused on shops / selling than one of their original core user groups. I've been using it for 10 years. First major blow was discontinuing the standalone gallery iOS app , which was brilliant for going to client meetings to show work & collections offline.  

Thanks 
S

Is this what you want?

https://summaryblock2.squarespace.com/?noredirect

pass: abc

Hi! Completely agree and sympathise with your frustration, the removal of such a basic feature has been angering me for the longest time, so I've been on a bit of a personal crusade to get it to work and I have!

I'm not sure if this is what you mean, but I'm assuming you want to add videos as project thumbnails in a portfolio page?

If so, the following code works for me by adding it to the header code injection in the portfolio pages advanced settings:

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

<script> $(document).ready(function(){

//PROJECT 1
$('<video autoplay loop muted playsinline><source src="video-url" type="video/mp4"></video>')
  .appendTo('a.grid-item[href="/portfolio-page-url/project-page-1-url"] .grid-image-inner-wrapper');

//PROJECT 2 
$('<video autoplay loop muted playsinline><source src="video-url" type="video/mp4"></video>')
  .appendTo('a.grid-item[href="/portfolio-page-url/project-page-2-url"] .grid-image-inner-wrapper');


}); </script>

<style>
  
  
 a.grid-item[href="/portfolio-page-url/project-page-1-url"] img,
  
 a.grid-item[href="/portfolio-page-url/project-page-2-url"] img,
  
{  visibility: hidden; } 


    .grid-image-inner-wrapper video {
    display: block !important;
    position: absolute !important;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
  
</style>

I'm a novice with coding, so this is a bit of a Frankenstein but it works! Essentially what this code is doing is loading the videos next to the thumbnails, and then hiding the original thumbnails.

This is set to autoplay, and for that the videos need to be muted. The code should cover this, but I recommend exporting any video / motion content with no audio channels. Also export them as mp4 files too. 

Bonus tip while I'm at it - I know it is hard to find links to your uploaded videos to Squarespace. I am unsure on the technicalities behind it, but I believe you cannot get a single link to your uploaded video. The workaround I found, was going to Website Tools > Custom CSS > Custom Files and uploading your videos there. Once they have finished uploading, you can click the video file and a URL will appear in the CSS workspace. Just copy this full URL, delete it in the CSS section, and then add it into this code. If the URL ends in ".mp4", you will need that too - this is what I did for my video thumbnails.

Hope this helps!
 

On 3/27/2024 at 7:41 AM, miserytakeme said:

Hi! Completely agree and sympathise with your frustration, the removal of such a basic feature has been angering me for the longest time, so I've been on a bit of a personal crusade to get it to work and I have!

I'm not sure if this is what you mean, but I'm assuming you want to add videos as project thumbnails in a portfolio page?

If so, the following code works for me by adding it to the header code injection in the portfolio pages advanced settings:

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

<script> $(document).ready(function(){

//PROJECT 1
$('<video autoplay loop muted playsinline><source src="video-url" type="video/mp4"></video>')
  .appendTo('a.grid-item[href="/portfolio-page-url/project-page-1-url"] .grid-image-inner-wrapper');

//PROJECT 2 
$('<video autoplay loop muted playsinline><source src="video-url" type="video/mp4"></video>')
  .appendTo('a.grid-item[href="/portfolio-page-url/project-page-2-url"] .grid-image-inner-wrapper');


}); </script>

<style>
  
  
 a.grid-item[href="/portfolio-page-url/project-page-1-url"] img,
  
 a.grid-item[href="/portfolio-page-url/project-page-2-url"] img,
  
{  visibility: hidden; } 


    .grid-image-inner-wrapper video {
    display: block !important;
    position: absolute !important;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
  
</style>

I'm a novice with coding, so this is a bit of a Frankenstein but it works! Essentially what this code is doing is loading the videos next to the thumbnails, and then hiding the original thumbnails.

This is set to autoplay, and for that the videos need to be muted. The code should cover this, but I recommend exporting any video / motion content with no audio channels. Also export them as mp4 files too. 

Bonus tip while I'm at it - I know it is hard to find links to your uploaded videos to Squarespace. I am unsure on the technicalities behind it, but I believe you cannot get a single link to your uploaded video. The workaround I found, was going to Website Tools > Custom CSS > Custom Files and uploading your videos there. Once they have finished uploading, you can click the video file and a URL will appear in the CSS workspace. Just copy this full URL, delete it in the CSS section, and then add it into this code. If the URL ends in ".mp4", you will need that too - this is what I did for my video thumbnails.

Hope this helps!
 

Can you elaborate on this process? Once I have the links to the videos from the Custom Files page, how do I change the header code?