(New Player) Using the Delay Code to Sync Page Elements with Your Video!
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.
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.
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).
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!
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
Thank you!