Is it possible? Videos on portfolios

Hi everyone! I've been wanting to switch to squarespace for a really long time now. i went for webflow from wordpress and then went back to wordpress but i still would like to be on squarespace, i just want something really easy and sleek to maintain without plug ins and all the tools i need.

I'm a 3d artist and i need a fairly simple portfolio.
the ONLY thing that's keeping me from Squarespace is that i can't seem to find anything regarding being able to use hosted MP4 or something similar like the thumbnail of SOME projects on my portfolio. i just don't want to use GIFs they look terrible and they're very heavy.

Is this something achievable in any way? or there's any news that this could be a feature at any point? Just to.... you know hahaha keep building my WordPress having in mind that at some point I'll have to re do everything on Squarespace haha

Thank you so much in advance to anyone that read this 🙂

All the best!

You mean you want to replace gif images on Portfolio List Page to video?

Yes! Hehe some of the projects instead of gif would be a video.

On 11/12/2023 at 11:45 PM, Teteercks said:

Yes! Hehe some of the projects instead of gif would be a video.

We will need to use custom code to do this

You can share link to your site & let me know which item you want to add video + send video files, I can check & give the code

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

17 hours ago, Steverrt said:

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

You can check my demo

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

pass: abc

if it is what you want, I will give the guide

Yes those look perfect , thank you! 

S

8 hours ago, tuanphan said:

You can check my demo

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

pass: abc

if it is what you want, I will give the guide

This is amazing! I would also love to know how you got this to work, thank you for everything you do!

@tuanphan I would also love to know!

@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 have been testing this with the first two items in my portfolio grid. I got it to work perfectly with your videos and your video url:

https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4

I have uploaded a video to my asset library and have been replacing your url with the url below using the format you mentioned above but my video is not showing:

https://maracas-dove-g85x.squarespace.com/s/areos_scrollingmockup_1920x1080.mp4

The link doesn't work. How do I find the correct url for my video?

My site is:

https://maracas-dove-g85x.squarespace.com/work

password: gravy2024

Thanks

Laura

@tuanphan I have also got some CSS styling (below) on the portfolio thumbnails (a zoom in) and when I add your code the zoom seems to stop working. Does your code on the actual page override my code in CSS. 

//zoom in portfolio grid//
section[data-section-id="65a514e64a52fd2c19c3c2a7"] {
    .grid-item {
        .grid-image-inner-wrapper {
            img {
                transition: transform 1s;
            }
        }
        &:hover {
            .grid-image-inner-wrapper {
                img {
                    transform: scale(1.2);
                }
            }
        }
    }
}

23 minutes ago, dotandpeg said:

Hi @tuanphan,

I have been testing this with the first two items in my portfolio grid. I got it to work perfectly with your videos and your video url:

https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4

I have uploaded a video to my asset library and have been replacing your url with the url below using the format you mentioned above but my video is not showing:

https://maracas-dove-g85x.squarespace.com/s/areos_scrollingmockup_1920x1080.mp4

The link doesn't work. How do I find the correct url for my video?

My site is:

https://maracas-dove-g85x.squarespace.com/work

password: gravy2024

Thanks

Laura

Video in Asset Library has a different url.

You can click video, you will see 404 error

17 minutes ago, dotandpeg said:

@tuanphan I have also got some CSS styling (below) on the portfolio thumbnails (a zoom in) and when I add your code the zoom seems to stop working. Does your code on the actual page override my code in CSS. 

//zoom in portfolio grid//
section[data-section-id="65a514e64a52fd2c19c3c2a7"] {
    .grid-item {
        .grid-image-inner-wrapper {
            img {
                transition: transform 1s;
            }
        }
        &:hover {
            .grid-image-inner-wrapper {
                img {
                    transform: scale(1.2);
                }
            }
        }
    }
}

The video code will replace <img> tag with <video> tag, so your code won't work

@tuanphan thank you so much , I'll work through this now 🙂 

Thanks @tuanphan. The <video> tag has worked and now my video is zooming in too.

I am still struggling to find out what the url of my video is that I've uploaded to my asset library. I know this https://maracas-dove-g85x.squarespace.com/s/areos_scrollingmockup_1920x1080.mp4 doesn't work but I am not sure how to get the url of a video that I put in my asset library.

Can you help?

Hi @tuanphan first of all thanks for all of your help here to everyone! 
Secondly I would like to ask if you could kindly explain how I can get the Portfolio thumbs to autoplay a video on hoover, have it working with a gif but can't understand how to make it work the same but with a video. Ideally something from vimeo if possible. 

I'm using this code for the autoplay on hoover for the gifs. 

@media screen and (min-width:768px) {

  a.grid-item .grid-image-inner-wrapper {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    transition: all 0.3s ease;
}
a.grid-item:hover .grid-image-inner-wrapper img {
    opacity: 0;
    transition: all 0.3s ease;
}
a.grid-item .grid-image-inner-wrapper img {
    transition: all 0.3s ease;
}
a.grid-item:nth-child(1) .grid-image-inner-wrapper {
    background-image: url(https://images.squarespace-cdn.com/content/v1/65a556feb63149536bbf3687/510a5182-2b9f-4324-97d1-d203ae38d4e4/hoka_01.gif);
}

Thanks so much! 

10 hours ago, dotandpeg said:

Thanks @tuanphan. The <video> tag has worked and now my video is zooming in too.

I am still struggling to find out what the url of my video is that I've uploaded to my asset library. I know this https://maracas-dove-g85x.squarespace.com/s/areos_scrollingmockup_1920x1080.mp4 doesn't work but I am not sure how to get the url of a video that I put in my asset library.

Can you help?

Not sure if this will work with video or not, but you can try

8 hours ago, miguelrato said:

Hi @tuanphan first of all thanks for all of your help here to everyone! 
Secondly I would like to ask if you could kindly explain how I can get the Portfolio thumbs to autoplay a video on hoover, have it working with a gif but can't understand how to make it work the same but with a video. Ideally something from vimeo if possible. 

I'm using this code for the autoplay on hoover for the gifs. 

@media screen and (min-width:768px) {

  a.grid-item .grid-image-inner-wrapper {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    transition: all 0.3s ease;
}
a.grid-item:hover .grid-image-inner-wrapper img {
    opacity: 0;
    transition: all 0.3s ease;
}
a.grid-item .grid-image-inner-wrapper img {
    transition: all 0.3s ease;
}
a.grid-item:nth-child(1) .grid-image-inner-wrapper {
    background-image: url(https://images.squarespace-cdn.com/content/v1/65a556feb63149536bbf3687/510a5182-2b9f-4324-97d1-d203ae38d4e4/hoka_01.gif);
}

Thanks so much! 

You mean show image, and when hover >> change image with video and make video play?

I just tried but can't get video url. If you still want to use video in Asset Library, then my approach is add one more section under Portfolio Page, then add some video blocks, then share link to your portfolio page, I can give code to hide this section + adjust the above code with Video Block

9 minutes ago, tuanphan said:

I just tried but can't get video url.

Folks. This is because videos don't expose the video URL in the Asset Library that I can then output with my code. Images of course are not a problem.

Agreed it seems that is the case, I also tried using a vimeo link but can't seem to get that to work either. I will try what @tuanphan has suggested with the video blocks and see where I get to.

1 hour ago, tuanphan said:

Not sure if this will work with video or not, but you can try

 

You mean show image, and when hover >> change image with video and make video play?

Hi @tuanphan that's correct, show image, and when hover >> change image with video and make the video auto play. 

If you could help me out understanding how I can achieve this that would be AMAZING! 
Ideally using a video snipped from Vimeo that I could cut just to have as a little video.

Thank you so much. 

Hi @tuanphan

I have set up a dummy portfolio grid using a mixture of image blocks and video block.
https://maracas-dove-g85x.squarespace.com/work-option-2
Password gravy: 2024

These blocks need to all have the following attributes:

- be beautifully aligned with no gaps (like the portfolio grid). I have got strange alignment & gaps occurring currently

- Translucent grey overlay on hover giving copy standout

- a centered title showing all the time

- A slight zoom in/creep on hover

- The videos play automatically - maybe on a loop of 3, without any buttons showing

- Aspect ration 19:6

- Link to individual portfolio pages when clicked

I can figure out some of the CSS for this but the main thing for me currently is that the alignment is terrible. I want everything to feel locked together and aligned with no gaps.

Can you advise me on how I can fix this,

Thanks as always,

Laura

On 1/17/2024 at 7:06 AM, miguelrato said:

Hi @tuanphan first of all thanks for all of your help here to everyone! 
Secondly I would like to ask if you could kindly explain how I can get the Portfolio thumbs to autoplay a video on hoover, have it working with a gif but can't understand how to make it work the same but with a video. Ideally something from vimeo if possible. 

I'm using this code for the autoplay on hoover for the gifs. 

@media screen and (min-width:768px) {

  a.grid-item .grid-image-inner-wrapper {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    transition: all 0.3s ease;
}
a.grid-item:hover .grid-image-inner-wrapper img {
    opacity: 0;
    transition: all 0.3s ease;
}
a.grid-item .grid-image-inner-wrapper img {
    transition: all 0.3s ease;
}
a.grid-item:nth-child(1) .grid-image-inner-wrapper {
    background-image: url(https://images.squarespace-cdn.com/content/v1/65a556feb63149536bbf3687/510a5182-2b9f-4324-97d1-d203ae38d4e4/hoka_01.gif);
}

Thanks so much! 

With video, it's more complicated, because we can't insert it as an image link with CSS background-image

You will need to insert the video next to the image, hide it, and then using CSS, on hover will hide the image and show the video.

To add videos, you can use the code I sent above, but you need to get the video direct url.
Or insert some video blocks into a separate section, then use JS code to move it near the corresponding images.

In general, it's quite time-consuming, so you can also think about whether you can create it another way.

• For example, creating a new page, inserting a video, and inserting an image below it, using CSS to achieve the effect will be much easier. Or just add video block only, use CSS background-image to add an image overlay video, and when users hover >> hide image to make video appears

21 hours ago, dotandpeg said:

Hi @tuanphan

I have set up a dummy portfolio grid using a mixture of image blocks and video block.
https://maracas-dove-g85x.squarespace.com/work-option-2
Password gravy: 2024

These blocks need to all have the following attributes:

- be beautifully aligned with no gaps (like the portfolio grid). I have got strange alignment & gaps occurring currently

- Translucent grey overlay on hover giving copy standout

- a centered title showing all the time

- A slight zoom in/creep on hover

- The videos play automatically - maybe on a loop of 3, without any buttons showing

- Aspect ration 19:6

- Link to individual portfolio pages when clicked

I can figure out some of the CSS for this but the main thing for me currently is that the alignment is terrible. I want everything to feel locked together and aligned with no gaps.

Can you advise me on how I can fix this,

Thanks as always,

Laura

Password is incorrect

I am working out a better way of doing this as I think it's getting very complicated. Thanks for your help.

On 1/17/2024 at 8:35 AM, tuanphan said:

I just tried but can't get video url. If you still want to use video in Asset Library, then my approach is add one more section under Portfolio Page, then add some video blocks, then share link to your portfolio page, I can give code to hide this section + adjust the above code with Video Block

 

Can you explain how to do this? I've used your code to successfully hide the thumbnail image, but I'm having trouble finding the URL for the video in the video block in the same page