You can add a timed buy button to your page based on the player time and not the time on page, so you are sure your button will drop at the exact time you want in your video. 

To do so, you only need to add a little piece of Javascript to your page. Here's an example: 

          <div id="hiddenContent" style="display: none;">

            <h1>Some previously hidden content</h1>

        </div>
       

        <script>
var TIME_TO_SHOW_THINGS = 15; // in seconds
var HIDDEN_CONTENT_ID = 'hiddenContent';
var EMBED_CODE_ID = 'vidalytics_embed__iXabHlolVFHCa3s';
var EMBED_CODE_RETURNING_KEY = EMBED_CODE_ID + '_returning'

if (!localStorage.getItem(EMBED_CODE_RETURNING_KEY)) {
function checkVideoTime() {
var embeds = (_vidalytics || {}).embeds || {};
if (embeds[EMBED_CODE_ID]) {
var player = embeds[EMBED_CODE_ID].player || {};
if (player.getCurrentVideoTime) {
var currentTime = player.getCurrentVideoTime();
if (currentTime >= TIME_TO_SHOW_THINGS) {
showHiddenItem();
return;
}
}
}
setTimeout(checkVideoTime, 1000);
}
checkVideoTime();
localStorage.setItem(EMBED_CODE_RETURNING_KEY, true);
} else {
showHiddenItem();
}

function showHiddenItem() {
document.getElementById(HIDDEN_CONTENT_ID).style.display = 'block';
}
</script>

                   This needs to go after your Vidalytics video embed code.

You will have to customize the video time, hidden element ID (ID of the element you wish to hide initially) and embed code ID (the ID attribute of your Vidalytics’ embed div).  

Note: If you want your timed button to appear when viewers have actually unmuted (not just autoplay), add this extra condition inside the checkVideoTime method:
" && !player.player.isMuted()" 

It is pure JS so it does not need any dependencies like jQuery ;) 

Creating Two Timed Buy Buttons for Two Different Videos

If you need to create two (2) timed buy buttons for two videos (1 each), you would just need to use multiple video embeds then follow the steps above. Then, wrap JavaScript in a separate function to enclose the variable scope. Here's an example:

  <div id="hiddenContent" style="display: none;">

            <h1>Some previously hidden content</h1>

        </div>
       

        <script>
       
function forFirstVideo() {
var TIME_TO_SHOW_THINGS = 15; // in seconds
var HIDDEN_CONTENT_ID = 'hiddenContent';
var EMBED_CODE_ID = 'vidalytics_embed__iXabHlolVFHCa3s';
var EMBED_CODE_RETURNING_KEY = EMBED_CODE_ID + '_returning'

if (!localStorage.getItem(EMBED_CODE_RETURNING_KEY)) {
function checkVideoTime() {
var embeds = (_vidalytics || {}).embeds || {};
if (embeds[EMBED_CODE_ID]) {
var player = embeds[EMBED_CODE_ID].player || {};
if (player.getCurrentVideoTime) {
var currentTime = player.getCurrentVideoTime();
if (currentTime >= TIME_TO_SHOW_THINGS) {
showHiddenItem();
return;
}
}
}
setTimeout(checkVideoTime, 1000);
}
checkVideoTime();
localStorage.setItem(EMBED_CODE_RETURNING_KEY, true);
} else {
showHiddenItem();
}

function showHiddenItem() {
document.getElementById(HIDDEN_CONTENT_ID).style.display = 'block';
}      
}
forFirstVideo();

</script>

The time out code is wrapped with function "forFirstVideo" and the call to that function forFirstVideo() is added right below.

Then all you have to do is duplicate the code and just modify the second one to have a different function name, like "forSecondVideo".

Timed Buy Buttons That Don't Show Up on Refresh

If you want your timed content to not show up if the page is refreshed (unless the viewer is already past the time the content/button should drop), here's a modified version of the code: 

          <div id="hiddenContent" style="display: none;">

            <h1>Some previously hidden content</h1>

        </div>
       

        <script>
var TIME_TO_SHOW_THINGS = 15; // in seconds
var HIDDEN_CONTENT_ID = 'hiddenContent';
var EMBED_CODE_ID = 'vidalytics_embed__iXabHlolVFHCa3s';
var EMBED_CODE_RETURNING_KEY = EMBED_CODE_ID + '_returning'

function checkVideoTime() {
var embeds = (_vidalytics || {}).embeds || {};
if (embeds[EMBED_CODE_ID]) {
var player = embeds[EMBED_CODE_ID].player || {};
if (player.getCurrentVideoTime) {
var currentTime = player.getCurrentVideoTime();
if (currentTime >= TIME_TO_SHOW_THINGS) {
showHiddenItem();
return;
}
}
}
setTimeout(checkVideoTime, 1000);
}
checkVideoTime();

function showHiddenItem() {
document.getElementById(HIDDEN_CONTENT_ID).style.display = 'block';
}
</script>


Another example: 

Did this answer your question?