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?

Oh okay. Good to know. Thanks! The section ID works great, so I'm okay with that.

I was actually able to solve this. Here is the code if anyone else needs a solution. .header-menu-nav-item>a:hover { color: #443A31 !important; font-style: italic; } @media only screen and (min-width:768px) { .header-menu-nav-item > a:after, .header-menu-nav-folder-item > a:after { content:''; width: 0px; height: 1px; background: #443A31; display: block; transition: width 1s ease; } } @media only screen and (max-width:767px) { .header-menu-nav-item > a:after, .header-menu-nav-folder-item > a:after { content:''; width: 0px; height: 1px; background: #443A31; display: block; transition: width 0.25s ease; } } .header-menu-nav-item > a, .header-menu-nav-folder-item:hover { background: none !important; } .header-menu-nav-item--active > a:after, .header-menu-nav-item:hover > a:after, .header-menu-nav-folder-item:hover > a:after { width: 100%; } .header-menu-nav-folder-item:hover > a { color: #443A31 !important; } body:not(.header--menu-open) .header-menu-nav-item--active>a { background-position: 0 calc(~"100% + 1px") !important; } .header-menu-nav-item a { display: inline-block !important; } .header-menu-nav-item { text-align: right; }

How can I make this work for mobile menu? I have a forced mobile menu on desktop. I tried this code, but the underline animation is across the entire screen. .header-menu-nav-item > a:after, .header-menu-nav-folder-item > a:after { content:''; width: 0px; height: 1px; background: #443A31; display: block; transition: width .5s ease; } .header-menu-nav-item > a, .header-menu-nav-folder-item:hover { background: none !important; } .header-menu-nav-item--active > a:after, .header-menu-nav-item:hover > a:after, .header-menu-nav-folder-item:hover > a:after { width: 100%; } .header-menu-nav-folder-item:hover > a { color: #443A31 !important; } body:not(.header--menu-open) .header-menu-nav-item--active>a { background-position: 0 calc(~"100% + 1px") !important; }

I actually just realized I could use a section ID instead, and that worked! When I just used a specific block ID, the hover effect didn't work. section[data-section-id="657dd35569daf04c17c39128"] { .video-caption-wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 60%; text-align: center; color: #EBE9E5; font-size: 10px; z-index: 50000; pointer-events: none; opacity: 0.75; transition: all 1s; } .video-block .intrinsic:after { content: ""; background-color: rgba(68, 58, 49, .75); display: block; top: 10%; left: 15%; width: 70%; height: 80%; border-radius: 25px; z-index: 20000; position: absolute; opacity: 0; transition: all 1s; } .video-block:hover .intrinsic:after { opacity: 1; transition: all 1s; } .video-block:hover .video-caption-wrapper { opacity: 1; transition: all 1s; } }

How to target this to specific video blocks only if I have the block IDs? When I try, the hover effect doesn't work anymore.

This doesn't seem to be working anymore. I'm not sure if the fluid engine has anything to do with it. Has anyone been able to fix this?

Hey I think I somewhat found a way around. I basically re-exported the video in portrait mode under 20mb and uploaded it to Squarespace. I hide the portrait version on desktop screen sizes and hide the landscape version on mobile screen sizes. 🤷‍♂️

Hey it fits really well. I decreased the height to 40% just in case. I did the same for the mobile mockup. However, they are still extremely pixelated. I don't understand why it's so clear on a larger device such as a desktop but pixelated on a mobile device. Is there any way to resize a background video for mobile without degrading the quality?

Hey, yes I still need help. Sorry if I was not clear enough. Those are not the right images. Try these links on mobile: https://trombone-walrus-wzht.squarespace.com/#6 https://trombone-walrus-wzht.squarespace.com/#7

Site URL: https://trombone-walrus-wzht.squarespace.com password: test How can I resize the two background videos of the mockup laptop and phone to fit within the width of the page on mobile without pixelating the video? Desktop background videos: Mobile background videos: