This article is also available in:

(New Player) Using the Delay Code to Sync Page Elements with Your Video!

This article provides instructions that should be used in the New VTurb Player. If you are using the Old Player, click here.

Using the Delay Code to Sync Page Elements with Your Video!

This guide will walk you through syncing your webpage elements with your video seamlessly!

We've crafted a script that aligns with your video playback, ensuring that everything stays coordinated even if a viewer pauses the video, boosting viewer retention and conversions.

Plus, we've integrated a caching feature! So, if a visitor, who's already seen your sales pitch, returns to the page, they can instantly access the content without having to replay the video from the start.

📢 Always test on a trial page first to guarantee it works smoothly!

Here's the breakdown:

Decide when in the video the elements should pop up.

Tag the elements you want this feature on with the “hide” class.

Copy the delay code and insert it right below your video player's script.

Step-by-Step Guide:

1. Decide when in the video the elements should pop up.

Below, we show where you should adjust the time - in seconds - for the sections and elements to appear on your page.

To find out the time in seconds, multiply the total minutes by 60 and add the remaining seconds.

Example:

If you want the elements to appear at minute 22:47 of your video, you should calculate the following:

22 (minutes) x 60 = 1320.

Add the remaining seconds: 47.

Total: 1367. This is the number that should appear in your code.

Replace the number 10 with the seconds you want:

2. Tag elements with the “hide” class.

For those using pure HTML, you'll want to wrap the elements you wish to influence with this delay script inside a div and tag it with the class “hide”, as demonstrated below:

Lastly, simply place the delay script right below your video's JS embed (not within the same div, but following your video div).

💡 For the Elementor users out there, paste the delay script within the same HTML box of your video, ensuring a gap exists between the JS embed and delay script:

a) Incorporate the script within the Elementor's HTML box:

****

****b) Tag elements or sections with the “hide” class:

Right-click the specific element (or even a whole section) you wish to delay and choose "edit element". In the side panel that appears, select "advanced".

Then, head over to the CSS Class section and type in: “hide”.

And voila! Your delay script should now be active and running on your site!

💡 Important: Always check the script in incognito mode to ensure it functions properly on your site!

Moreover, if you have multiple videos on a page, ensure the main one uses the JS code while others stick to the iFrame. This helps avoid any script conflicts, ensuring smooth delay functionality.

Here's the actual Delay Script Code:

<style>
  .hide{
    display: none;
  }
</style>

<script>
/* CHANGE THE VALUE 10 TO THE SECONDS WHEN THE SECTIONS WILL APPEAR */
  var delaySeconds = 10;
  var player = document.querySelector("vturb-smartplayer");
  player.addEventListener("player:ready", function() {
    player.displayHiddenElements(delaySeconds, [".hide"], {
      persist: true
    });
  });
</script>

Updated on: 06/19/2025

Was this article helpful?

Thank you!