Just throwing in my agreement that Portfolios could benefit from two features:
1) The ability to duplicate a portfolio (to maintain styling etc. when adding a new portfolio)
2) The ability to add pagination at say 10, 40, 100 items to exceed the 40-item limit.
@miserytakeme @TreeBurns @Steverrt
#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 guide to upload video: https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files
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
HI @tuanphan
I'm wanting to similar add a couple of short video clips (m4v) to a Portfolio page. Is this possible with code ?
I've tried converting them to gifs and this works, but it looks bad with the compression and it bugs down the page when scrolling down the gallery.
It looks like there are quite a lot of people requesting this. Especially those who do Photography & video content , or graphic & motion graphics, illustrators that make animation as well as traditional static art.
To be able to showcase a mix of images and motion is a must these days.
Thanks
S
I think they mean a video thumbail for a project page, NOT an image:
I've attached screengrabs from the site I'm porting over from 7.0 to 7.1 and the different project settings GUIs
Am also looking for any kind of workaround. Video thumbnails are pretty standard fair for web design these days so amazed (maybe not) that this feature has been dropped.
I would like my portfolio collection page thumbnails that click through to the specific project page to be video vs an image. Is this possible?? Can’t seem to find ANYTHING about this! Any advice??
Steverrt got a reaction from miserytakeme in Is it possible? Videos on portfolios
