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!

If you prefer, you can check out this tutorial in the video:



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 type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
/* CHANGE THE VALUE 10 TO THE SECONDS AT WHICH THE SECTIONS WILL APPEAR */
var SECONDS_TO_DISPLAY = 10;
var CLASS_TO_DISPLAY = ".hide";

/* NO CHANGES NEEDED BELOW THIS POINT */
var attempts = 0;
var elsHiddenList = [];
var elsDisplayed = false;
var elsHidden = document.querySelectorAll(CLASS_TO_DISPLAY);
var alreadyDisplayedKey =`alreadyElsDisplayed${SECONDS_TO_DISPLAY}`
var alreadyElsDisplayed = localStorage.getItem(alreadyDisplayedKey);

setTimeout(function () { elsHiddenList = Array.prototype.slice.call(elsHidden); }, 0);

var showHiddenElements = function () {
elsDisplayed = true;
elsHiddenList.forEach((e) => e.style.display = "block");
localStorage.setItem(alreadyDisplayedKey, true)
}

var startWatchVideoProgress = function () {
if (typeof smartplayer === 'undefined' || !(smartplayer.instances && smartplayer.instances.length)) {
if (attempts >= 10) return;
attempts += 1;
return setTimeout(function () { startWatchVideoProgress() }, 1000);
}

smartplayer.instances[0].on('timeupdate', () => {
if (elsDisplayed || smartplayer.instances[0].smartAutoPlay) return;
if (smartplayer.instances[0].video.currentTime < SECONDS_TO_DISPLAY) return;
showHiddenElements();
})
}

if (alreadyElsDisplayed === 'true') {
setTimeout(function () { showHiddenElements(); }, 100);
} else {
startWatchVideoProgress()
}
});
</script>

Updated on: 10/18/2024