Is it possible? Videos on portfolios

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

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>

<style>
  
 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%;
}
  

</style>

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

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

www.miserytakeme.design/portfolio

Hope this all helps!