tuanphan Posted February 29 Share Posted February 29 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 miserytakeme 1 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 Posted February 29 Share Posted February 29 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> Link to comment
dotandpeg Posted March 1 Share Posted March 1 @miserytakeme Nice one! I might revisit this and see if I can do it too, can you show me the end result? Link to comment
miserytakeme Posted March 7 Share Posted March 7 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! Beyondspace 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment