How can I make an embedded video load faster?

1. Open the video and select Share.
2. Under Embed, choose Popout if the video does not need to show at once, or Responsive if it does.
3. Open Settings, go to Audio & streaming, and check that Streaming is set to Adaptive.
4. Test the page with your usual speed tool before and after the change.

An interactive video loads a player, the interactions and the video stream. Mindstamp serves the player and video from content delivery networks and loads only what the player needs. The biggest gains on your side come from when the player loads, not how.

• Popout: only a thumbnail image and a small script load with your page. No player loads until the viewer selects the thumbnail.
• Responsive: the iframe has `loading="lazy"`, so the browser waits until the viewer scrolls near it. A video at the top of the page still loads at once.
• Basic iframe: loads with the page unless you add `loading="lazy"` to the iframe yourself.

Adaptive streaming (HLS) sends the best quality for each viewer’s connection and starts playing sooner. Full Quality plays the full MP4 file, which can buffer on slow connections. Use Full Quality only when you need it.

To keep the player out of your first page load, add an empty box where the video goes, such as a div with the id `mindstamp-video`, a `data-src` attribute set to the address in the `src` of your Basic iframe code, and the style `aspect-ratio:16/9`. Then add this script at the end of the page. It adds the player two seconds after the page finishes loading, and lets click actions open links in your page.

const loadMindstampPlayer = () => {
  const box = document.getElementById('mindstamp-video');
  if (!box) return;

  const frame = document.createElement('iframe');
  frame.src = box.dataset.src;
  frame.title = box.dataset.title || 'Interactive video';
  frame.allow = 'autoplay; fullscreen; picture-in-picture; microphone; camera; clipboard-write';
  frame.allowFullscreen = true;
  frame.style.cssText = 'width:100%;height:100%;border:0;display:block;background:#000';
  box.append(frame);

  window.addEventListener('message', (event) => {
    if (event.source === frame.contentWindow && event.data?.event === 'redirect') {
      window.location.href = event.data.info.data.link;
    }
  });
};

const startAfterLoad = () => setTimeout(loadMindstampPlayer, 2000);

if (document.readyState === 'complete') {
  startAfterLoad();
} else {
  window.addEventListener('load', startAfterLoad, { once: true });
}

• Put one video per page where you can. Each embed loads its own player.
• Do not autoplay videos that are below the fold.
• Include SEO metadata adds text only. It does not slow the player.

• Sharing tutorial
• Settings tutorial