How To Show a Popup And Exit Thumbnail If a User Exits The Page

When a user hovers up to the X in the window on desktop or hits the back button you might want to:

• pause the video and show an Exit Thumbnail
• show the popup to get user to "stop" and consider "seeing the offer right now".

To achieve this, you can track if user's mouse is near the top of the window. Here's an code example to achieve this.

<div id="vidalytics_embed_ZVUSro0YXcwq_Urm" style="width: 100%; position:relative; padding-top: 56.25%;"></div>
<script type="text/javascript">
  (function (v, i, d, a, l, y, t, c, s) {
    y='_'+d.toLowerCase();c=d+'L';if(!v[d]){v[d]={};}if(!v[c]){v[c]={};}if(!v[y]){v[y]={};}var vl='Loader',vli=v[y][vl],vsl=v[c][vl + 'Script'],vlf=v[c][vl + 'Loaded'],ve='Embed';
    if (!vsl){vsl=function(u,cb){
      if(t){cb();return;}s=i.createElement("script");s.type="text/javascript";s.async=1;s.src=u;
      if(s.readyState){s.onreadystatechange=function(){if(s.readyState==="loaded"||s.readyState=="complete"){s.onreadystatechange=null;vlf=1;cb();}};}else{s.onload=function(){vlf=1;cb();};}
      i.getElementsByTagName("head")[0].appendChild(s);
    };}
    vsl(l+'loader.min.js',function(){if(!vli){var vlc=v[c][vl];vli=new vlc();}vli.loadScript(l+'player.min.js',function(){var vec=v[d][ve];t=new vec();t.run(a);});});
  })(window, document, 'Vidalytics', 'vidalytics_embed_ZVUSro0YXcwq_Urm', 'https://quick.vidalytics.com/embeds/sXFEYTDU/ZVUSro0YXcwq_Urm/');
</script>

<script>
  const EMBED_ID = 'vidalytics_embed_ZVUSro0YXcwq_Urm';

  !function(v,a,p,i){
    v.getVidalyticsPlayer=n=>{v[a]=v[a]||{},v[a][p]=v[a][p]||{};let d=v[a][p][n]=v[a][p][n]||{};
    return new Promise((e=>{if(d[i])return void e(d[i]);let t;
    Object.defineProperty(d,i,{get:()=>t,set(i){t=i,e(i)}})}))}
  }(window,'_vidalytics','embeds','player');

  getVidalyticsPlayer(EMBED_ID).then(player => {
    if (!player) return;

    function onMouseOutHandler(event) {
      // If the mouse is near the top of the window, show the popup
      // Also, do not trigger when hovering or clicking on selects
      if (
        event.clientY < 50 &&
        !event.relatedTarget &&
        event.target.nodeName.toLowerCase() !== 'select'
      ) {
        // Add your own logic regarding showing popup here
        player.pause('ui');
        player.unmute();
      }
    }

    document.addEventListener('mouseout', onMouseOutHandler);
  });
</script>

Have questions? Reach out to hi@vidalytics.com for any assistance with this.