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
You will see URL Slug
#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>
#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