How do I pass URL parameters from my page into an embedded video?

Short answer

Add a short script to the page that copies the page's query string onto the Mindstamp iframe address. The player then reads each parameter. name, email, phone and custom_id identify the viewer, and every other parameter becomes a variable you can show in the video and see in reports.

How to do it

1. Embed the video with the embed code from the video's Share page.
2. Add the script below to the page, after the embed code.
3. If you use a custom domain for your videos, add it to the playerHosts list.
4. Open the page with test parameters, for example ?name=Sam%20Lee&custom_id=E-1024&utm_source=newsletter.
5. Play the video, then open Reporting > Views. The view shows Sam Lee with custom ID E-1024.

The script

The script adds each page parameter to the Mindstamp iframe address. It does not replace a parameter that the embed code already sets, and it leaves other iframes alone.

const playerHosts = ['embed.mindstamp.com', 'interact.video'];

const passPageParams = () => {
  const pageParams = new URLSearchParams(window.location.search);
  if (!pageParams.toString()) return;

  document.querySelectorAll('iframe[src]').forEach((frame) => {
    const src = new URL(frame.src);
    if (!playerHosts.includes(src.hostname)) return;

    pageParams.forEach((value, key) => {
      if (!src.searchParams.has(key)) src.searchParams.set(key, value);
    });
    frame.src = src.toString();
  });
};

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', passPageParams);
} else {
  passPageParams();
}

Parameters the player understands

• name, email, phone and custom_id set the viewer's identity. Reports and exports show them.
• Any other parameter becomes a variable with the same name, for example utm_source or company. You can show variables in the video with personalization, and exports can include them.
• t, autoplay, loop and fullscreen control playback. The embed code sets these from your video settings.
• lang selects the viewer language for a translated video.

Things to know

• URL-encode values. A space is %20 and @ is %40. URLSearchParams in the script encodes values for you.
• Changing the iframe address reloads the player. The script runs once when the page loads, so it does this only once.
• If you only need to identify viewers from a link you send, you do not need a script. Add the parameters to the share link, or use a personalized link.
• Showing variables in the video (personalization) is on Core and higher plans. See pricing.
• Do not put private data in a URL that other people can see or share.

Go further

• Variables tutorial
• Personalization
• Compare plans