Jump to content

Is it possible? Videos on portfolios

Recommended Posts

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!

Link to comment
  • 2 weeks later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...

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

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@miserytakeme @TreeBurns @Steverrt

#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  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>

image.thumb.png.f61a7b0fae076006f16503708feb3005.png

#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

Edited by tuanphan
tags people

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

Link to comment

@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);
                }
            }
        }
    }
}

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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! 

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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. 

Link to comment

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

Link to comment

 

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
  • 1 month later...
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

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

√ó
√ó
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.