How do I use JavaScript events from an embedded Mindstamp video?

1. Embed the video with the embed code from the video's Share page.
2. Add the listener script below to the same page, after the embed.
3. Change the actions to what your page needs.
4. Open the page, open the browser console, and play the video. You see the event names as the video plays.

Check event.origin so your page ignores messages from other frames. If you use a custom domain for your videos, add it to the list.

const playerOrigins = ['https://embed.mindstamp.com', 'https://interact.video'];

window.addEventListener('message', (event) => {
  if (!playerOrigins.includes(event.origin)) return;
  const message = event.data;
  if (!message || typeof message.event !== 'string') return;

  const { event: name, info } = message;
  console.log('Mindstamp event:', name, info);

  if (name === 'video_end') {
    document.querySelector('#next-step')?.removeAttribute('hidden');
  }

  if (name === 'viewer_interaction' && info.data.parent_value === 'Buy now') {
    window.location.href = '/checkout';
  }
});

• video_ready: the player has loaded.
• video_play and video_pause: playback started or paused.
• time_update: the current time, about once a second while the video plays.
• progress_10, progress_25, progress_50, progress_75, progress_90, progress_95 and progress_100: the playback position passed that percentage. Each is sent once per view.
• video_end: the video ended.
• viewer_interaction: the viewer clicked an interaction or answered a question.
• set_variable: a variable changed. info.data has key and value.
• redirect and download: the viewer started a link redirect or a file download. info.data has link.
• play_blocked, play_failed and playback_error: the browser blocked or could not play the video.

Every message has event (the name), version (1), and info. The info object has title, token, currentTime, formattedTime, duration, formattedDuration, videoWidth, videoHeight, variables, viewer (id, name, email, custom_id), currentScore, and data. For a viewer_interaction event, data looks like this:

const exampleInteractionData = {
  interaction_type: 'reply',
  interaction_value: 'Green',
  internal_label: null,
  parent_id: 'a1b2c3',
  parent_type: 'question',
  parent_value: 'Which color is the exit sign?',
  question_style: 'multiple',
  correct_answer: 'Green',
  correct: true,
};

Send a message to the player frame. Supported commands: play_player, pause_player, rewind, fast_forward, change_time (with time in seconds), and set_variable (with variable_name and variable_value). Browsers can block play_player until the viewer has interacted with the page.

const frame = document.querySelector('iframe[src*="embed.mindstamp.com"]');
const playerOrigin = new URL(frame.src).origin;

frame.contentWindow.postMessage({ event: 'change_time', time: 30 }, playerOrigin);
frame.contentWindow.postMessage({ event: 'set_variable', variable_name: 'PLAN', variable_value: 'Pro' }, playerOrigin);
frame.contentWindow.postMessage({ event: 'pause_player' }, playerOrigin);

• The embed code from the Share page includes a short script that follows redirect events. Keep it if your video uses redirect actions.
• Events include the viewer's name, email and custom ID when the viewer is identified. Treat them as personal data on your page.
• change_time with a time of 0 does not seek. Use rewind, or a time such as 0.1.
• The enter_fullscreen command does not work, because browsers allow fullscreen only after a viewer action.

• API and events reference
• Embed HTML
• Compare plans