JamIsJam88

On 7/9/2023 at 4:41 AM, tuanphan said:

You can use this CSS code

.video-player .plyr .plyr__controls:before
{display:none!important;}

.plyr__video-wrapper video, .plyr__video-wrapper
{border-radius:30px !important;}

 

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.

23 hours ago, Wandells said:

Now it works! 🤩

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.

On 3/25/2024 at 7:35 AM, Calzone said:

Oddly enough banner videos work, but regular videos do not.

calzone.com

 

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.

3 hours ago, tuanphan said:

Which code did you use?

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.

4 hours ago, tuanphan said:

You mean

users submit > after X seconds > Show post message?

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

On 6/20/2023 at 3:31 AM, tuanphan said:

 You can add this code to

<script>
         setTimeout(function(){
            window.location.href = 'https://google.com';
         }, 3000);
</script>

3000 = 3 seconds

replace google with new page url

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

26 minutes ago, paramjeet.kour08 said:

can you pls send me site url pls?

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

7 hours ago, tuanphan said:

Just a static scroll bar or scroll bar with number changed like your example?

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

3 hours ago, tuanphan said:

Do you have a mockup/an example, we can imagine your request easier.

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?

On 2/20/2024 at 3:31 AM, tuanphan said:

Use Block ID doesn't work because this class name = ID

If you use a block id wrap around all code, the code will be invalid so it doesn't work

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

On 2/20/2024 at 3:52 AM, tuanphan said:

You can share link to site where you have problem, we can check easier

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

48 minutes ago, tuanphan said:

Which exact code did you try?

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?

10 hours ago, bangank36 said:

Do you mean this section getting trouble?

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. 🤷‍♂️

29 minutes ago, bangank36 said:

Try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  section[data-section-id="61b28968e2a8a218a82baa49"]  .section-background  .sqs-video-background-native {
    height: 45%;
    top: 50%;
    transform: translateY(-50%);
  }
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

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?

22 minutes ago, bangank36 said:

I 've found that your video, image have the right width

Do you still need help?

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: