How can I make an embedded video load faster?

Short answer

Use the Responsive embed, which already loads lazily, or the Popout embed, which loads the player only when the viewer selects it. Keep the video on Adaptive streaming. For strict speed targets, load the player after your page finishes loading.

How to do it

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.

Why embeds add weight

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.

Options from lightest to heaviest

• 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.

Use adaptive streaming

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.

Load the player after the page

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 });
}

Other tips

• 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.

Go further

• Sharing tutorial
• Settings tutorial