JamIsJam88

Okay, this works great to set a border radius for the video blocks. However, there is a very brief moment when the page loads that the borders are straight before changing. How to set the border radius for the first frame of the video? I do not have a custom image for the video block.

It does work for videos uploaded to video blocks on mobile, which is great! However, it does not work for specific videos uploaded to CSS custom files. Background videos uploaded to CSS custom files always worked and still do. However, videos uploaded to CSS custom files do not work when used in a preloader or a lightbox on Chrome mobile. On Safari mobile, they play if you double tap the video, but it only plays in fullscreen. When you minimize it, the iOS video controls appear. This is not functional from a UI/UX perspective.

Yep background videos are still working. Videos uploaded to video blocks or custom CSS do not play at all.

Hopefully, this can be fixed soon. The iOS 17.4.1 update did not fix this.

Still does not work as of iOS 17.4.1.

This is the code I am using to delay actions from buttons being pressed, such as any links from opening in new windows or sending an email. I removed the code to delay the form post-submit message because I kept getting a 403 forbidden error. <!-- BUTTON DELAY AND ANIMATION --> <script> document.addEventListener('DOMContentLoaded', function() { var targetSelectors = '.sqs-block-button-container a, header#header a.btn'; var buttons = document.querySelectorAll(targetSelectors); buttons.forEach(function(button) { var timeoutId; // Function to handle the animation function animateButton() { button.classList.add('pressed'); // Ensure animation lasts 500ms timeoutId = setTimeout(function() { button.classList.remove('pressed'); }, 500); } // Function to perform the button's action after a delay, including animation time function performAction(e) { // Delay only if it's a link with an href attribute var url = button.getAttribute('href'); if (url) { e.preventDefault(); // Prevent default immediately to handle manually later clearTimeout(timeoutId); // Clear any ongoing animation timeout animateButton(); // Animate button press setTimeout(function() { // Handle link target attribute for correct behavior var target = button.getAttribute('target'); if (target === '_blank') { window.open(url, '_blank'); } else { window.location.href = url; } }, 500); // Total delay includes animation time } } // Touch events for mobile button.addEventListener('touchend', performAction); // Click event for desktop and fallback for mobile button.addEventListener('click', performAction); }); }); </script>

This is happening to me as well. Videos I upload to Squarespace video blocks don't play on my iPhone, but they do on other mobile devices. I tried clearing my cache on Chrome and Safari and using private browsing mode. It shows a frame from the video and then shows a black screen and the error Video unavailable. Try playing something else.

Hey tuanphan. I found some Javascript to delay any action if a button is pressed, but any delay with forms, results in a 403 forbidden error probably due to a security feature on Squarespace. I was able to use Javascript to delay other specific buttons by 500ms for the button animations to play out. If you know of a workaround to delay form submit buttons, that would be greatly appreciated!

I just figured it out. It's not the text that was not aligning with the radios and checkboxes. It was the radios and checkboxes themselves. Also, this code changes the colour of the fill when you select a radio or checkbox. I didn't like the default bright blue on Apple devices. .sqs-block-form .field-list fieldset.checkbox input[type="checkbox"] { accent-color: #443A31; vertical-align: middle; } .sqs-block-form .field-list fieldset.radio input[type="radio"] { accent-color: #443A31; vertical-align: middle; }

How can I delay the form submission before displaying a post message?

Hi Paramjeet. I'll send you in a private message.

I made the text for radio options and checkboxes on forms smaller than 1rem for aesthetic purposes. However, the text is not vertically aligned with the radios and checkboxes. I've tried the code below, but it doesn't work. How can I align the text vertically with the radios and checkboxes? .sqs-block-form .field-list .option { display: flex !important; align-items: center !important; justify-content: center !important; }

A scroll bar with a Lottie animation in place of the number changed like in the example, if possible.

Yes, something like the example below. However, I want to embed a Lottie animation in place of the text above the scroll bar. https://www.ghostplugins.com/products/scroll-progress-bar

I'm looking to add and customize a horizontal scrollbar at the bottom of a website. I also want to embed a Lottie animation above the end of the scrollbar. Is this possible?