Delay Elements - Wistia & Vimeo

How to delay any element in Synamate page until the user reaches a certain point in the embedded video

For Wistia Hosted Videos:

Script:

<script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var button = document.getElementById('PASTE-ELEMENT-ID-HERE-REMOVE-#');
            button.style.display = 'none';
            window._wq = window._wq || [];
            _wq.push({ id: "PASTE-VIDEO-ID-HERE", onReady: function(video) {
                video.bind('timechange', function(time) {
                    if (time >= 600) {
                        button.style.display = 'block';
                    }
                });
            }});
        });
</script>

Use Case:

VSL Pages - If you have a vsl page, you can delay a button to get qualified appointments/purchases. You would want your viewers/leads to see the video atleast to a point right?

For Vimeo Hosted Videos:

Copy paste this below script in Code Element in Synamate under the Wistia video.

This script only works for Vimeo Video.

<script> 
  document.addEventListener('DOMContentLoaded', function() {
  function getVimeoID(iframe) {
    var src = iframe.getAttribute('src');
    var match = src.match(/video\/(\d+)/);
    return match ? match[1] : null;
  }

  var iframes = document.querySelectorAll('iframe');

  var targetVideoID = 'PASTE-VIDEO-ID-HERE'; //Enter the video ID

  iframes.forEach(function(iframe) {
    var videoID = getVimeoID(iframe);

    if (videoID === targetVideoID) {
      var player = new Vimeo.Player(iframe);

      var button = document.getElementById('PASTE-BUTTON-ID-HERE-REMOVE-#');
      button.style.display = 'none';

      player.on('timeupdate', function(data) {
        if (data.seconds >= 600) { // Change time here
          button.style.display = 'block';
        }
      });
    }
  });
});

</script>