Jump to content

Is it possible? Videos on portfolios

Recommended Posts

On 2/27/2024 at 5:26 PM, miserytakeme said:

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

You can follow this guide https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files

suppose your site url is misery.squarespace.com and video name is bike.mp4

video file url will be https://misery.squarespace.com/s/bike.mp4

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've worked it out!!!

Go to Wesbite Tools > Custom CSS > add custom files > upload your video (recommended with no audio channels and in a h.264 codec in mp4 format)

(The reason you upload it here I think this is because SS makes temporary URLS when using video files, so you cannot get static URLS in the asset finder like you can with other files, meaning you cannot link to videos using HTML and the like unless it has been uploaded in the Custom CSS workspace)

Then go to a blank portion of your CSS workspace below, click to add your cursor, now click your custom files and you should get a static link in which you can use this code - I have updated and modified Taunphans for support with autoplay on iOS Safari


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

<script> $(document).ready(function(){

$('<video autoplay loop muted playsinline><source src="URL FROM CUSTOM CSS FILE UPLOAD" type="video/mp4"></video>')
.appendTo('a.grid-item[href="/yourportfoliopageurl/yourportfoliosubpageurl"] .grid-image-inner-wrapper');

}); </script>

 a.grid-item[href="/yourportfoliopageurl/yourportfoliosubpageurl"] 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%;



Link to comment
On 3/1/2024 at 9:48 AM, dotandpeg said:

@miserytakeme Nice one! I might revisit this and see if I can do it too, can you show me the end result?

@dotandpeg Absolutely! It's all still a WIP now and not all of them use videos, but the ones that do are working really nicely! Only issue is they won't autoplay on an iOS device on battery saver mode, but I don't think there's anything we can do to get around that unfortunately

I recommend adding images in each pages settings as the videos can take a second or two to load - I used the first frame of the videos


Hope this all helps!

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.