Buy me a coffee

Portfolio with Video

To replace Portfolio Page Image with Video, you can follow these steps

#1. First, you need to find Portfolio items url

Hover on each Portfolio item > Click 3 dots > Settings

Portfolio Settings Min

You will see URL Slug

Portfolio Settings Url Slug Min

#2. Next, you need to get Video Direct URL

With Vimeo, you will need to use Paid Plan to able to get direct URL

With Youtube, no way to get this url, you need to download video then upload to Squarespace.

You can follow this quick tips to know how to upload Video

suppose your site is: summary.squarespace.com

And Video name is: bear-in-mountain.mp4

The file url will be: summary.squarespace.com/s/bear-in-mountain.mp4

#3. Use this code to Portfolio Page Settings Code Injection

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('<video autoplay loop muted><source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4" type="video/mp4"></video>').appendTo('a.grid-item[href="/photography/people-eb852-draft"] .grid-image-inner-wrapper');
  $('<video autoplay loop muted><source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4" type="video/mp4"></video>').appendTo('a.grid-item[href="/photography/interiors-dmhc5"] .grid-image-inner-wrapper');
});
</script>
<style>
a.grid-item[href="/photography/people-eb852-draft"] img, a.grid-item[href="/photography/interiors-dmhc5"] 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>

Portfolio Video Min

#4. Explain code

This code will add video to first portfolio item with url slug: /photography/people-eb852-draft

$('<video autoplay loop muted><source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4" type="video/mp4"></video>').appendTo('a.grid-item[href="/photography/people-eb852-draft"] .grid-image-inner-wrapper');

This code will add video to second portfolio item with url slug /photography/interiors-dmhc5

$('<video autoplay loop muted><source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4" type="video/mp4"></video>').appendTo('a.grid-item[href="/photography/interiors-dmhc5"] .grid-image-inner-wrapper');

You can repeat the code & replace example videos with your video url

Portfolio Video2 Min