Hiding CTA after time delay

Technical
1

Hey guys, building a funnel for a VSL, but the previous posts on the forum’s code does not work. Not sure why, but I’m unable to make the button be hidden and only display after x time delay.

Any help would be greatly appreciated.

2

Hi @Tiaan_le_Roux

hope are you doing great. Could you take a look at this post Display Hidden Content After Video Ends

5

HI @Tiaan_le_Roux, To display the avc element when the video reaches 2 minutes, you can use the timeupdate event, which is triggered periodically as the video plays. Here’s how you can modify the code:

const video = document.querySelector("#myVideo video");
const avc = document.querySelector(".afterVideo");

video.addEventListener("timeupdate", function() {
    if (video.currentTime >= 120) { // 120 seconds = 2 minutes
        avc.style.display = "block";
        video.removeEventListener("timeupdate", arguments.callee); // Stop checking after displaying the element
    }
});

Explanation:

  • timeupdate event: This event is fired when the video’s playback position changes.
  • currentTime: This property gives the current playback time of the video in seconds.
  • 120: This is the time in seconds (2 minutes) where you want to display the avc element.
  • removeEventListener: This removes the event listener after the condition is met, so it doesn’t keep checking after the 2-minute mark.

This code will show the avc element when the video reaches 2 minutes of playback.

6

I use a third party video player integration, So just a timer is fine of 2 minutes on page load is fine… but thanks! I appreciate the help.

7

You can achieve a 2-minute delay using CSS animations by hiding the button initially and then showing it after the animation completes. Here’s how you can do it:

CSS:

.hidden {
  opacity: 0;
  pointer-events: none;
  animation: showButton 0s ease 120s forwards;
}

@keyframes showButton {
  to {
    opacity: 1;
    pointer-events: auto;
  }
}

Explanation:

  • The button starts as hidden with opacity: 0 and pointer-events: none (so it’s not clickable).
  • The animation property waits for 120s (2 minutes) before changing the button’s opacity to 1 and making it clickable by setting pointer-events: auto.
  • The forwards in the animation ensures the final state (visible and clickable) persists after the animation ends.

This will show the button after a 2-minute delay using only CSS.