# Delay Elements - Wistia & Vimeo

## For Wistia Hosted Videos:

{% embed url="<https://www.loom.com/share/96a39856752c44a8b2c022131f9b8f1b?hideEmbedTopBar=true&hide_share=true&hide_title=true&sid=375bc70b-67f1-4e3c-be76-1ce105c9142a?hide_owner=true>" %}

#### **Script:**

{% code overflow="wrap" %}

```javascript
<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>
```

{% endcode %}

#### **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:

{% embed url="<https://www.loom.com/share/cefdc4408cb0486cb7ad95ca085efc51?hideEmbedTopBar=true&hide_owner=true&hide_share=true&hide_title=true>" %}

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

This script only works for Vimeo Video.

```javascript
<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>
```