CTA Overlays

Three CTA overlays configured: a timed promo banner (5s–12s), a persistent subscribe pill (from 3s), and an end-screen with a sign-up button.

Source code

<link rel="stylesheet" href="https://cdn.impossible.io/support/fxplayer.css" />
<script src="https://cdn.impossible.io/fxplayer/v3/fxplayer.js"></script>

<div id="player" style="width: 720px; aspect-ratio: 16/9;"></div>

<script>
  const player = new fxplayer.FXPlayer('player', {
    src: 'https://www.w3schools.com/html/mov_bbb.mp4',
    controls: true,
  });

  // Timed CTA: show a promo between 5s and 12s
  player.addCTA('promo', {
    content: '<div class="promo-banner">50% Off</div>',
    startTime: 5,
    endTime: 12,
    position: 'center',
    dismissible: true,
  });

  // Persistent CTA: appears at 3s, stays until user closes
  player.addCTA('subscribe', {
    content: '<div class="subscribe-pill">Subscribe</div>',
    startTime: 3,
    position: 'bottom',
    dismissible: true,
  });

  // End-screen CTA: shown when video finishes
  const endScreen = document.createElement('div');
  endScreen.className = 'end-screen';
  endScreen.innerHTML = '<h2>Enjoyed the video?</h2>'
    + '<button onclick="alert(\'Signed up!\')">Sign Up</button>';

  player.addCTA('end-screen', {
    content: endScreen,
    position: 'center',
    pauseOnShow: true,
    dismissible: false,
  });

  // Hide timed CTAs when end-screen appears
  player.on('ended', () => {
    player.hideCTA('promo');
    player.hideCTA('subscribe');
  });

  // Events
  player.on('cta:show', (d) => console.log('CTA shown:', d.id));
  player.on('cta:hide', (d) => console.log('CTA hidden:', d.id));
  player.on('cta:click', (d) => console.log('CTA clicked:', d.id));
</script>