In some scenarios, you might want to embed the player on your page using your own custom domain, instead of the default one.

By default, the SDK only allows certain domains for security reasons. If your player is embedded from a custom domain, you must explicitly allow it using Player.setCustomDomains() before initializing the player.

Allowing Custom Domains for a single player

Here's an example on how you can allow your custom domain (for example my.custom-domain.com) when using the SDK:

<!-- Movingimage iframe embedding from a custom domain -->
<iframe
  style="border: none; width: 100%; aspect-ratio: 16/9;"
  src="//my.custom-domain.com/watch?video-id=123&player-id=123&channel-id=123"
  allowfullscreen
  allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share;"
  frameborder="0"
>
</iframe>

<script type="module">
  import { Player } from 'https://e.video-cdn.net/mi-player-sdk/mi-player-sdk.js';

  // Allow the custom domain before initializing the player
  Player.setCustomDomains(['my.custom-domain.com']);

  // Now you can safely create the player instance
  const player = new Player('mi-embedded-video');
</script>
Copy

You can also use regular expressions to match one or multiple URLs:

// Allow only URLs starting with `https://my.custom-domain.com/watch`
Player.setCustomDomains([/^https:\/\/my\.custom-domain\.com\/watch/i]);
Copy

Regular expressions will match against the entire iframe src URL (instead of just the hostname), so you can further filter which iframe's in your page are valid players.

Custom Domains with multiple Players

Custom domains will also be used by Player.allPlayers() to filter which iframes in your page are valid players.

If you have multiple iframes in your page with the same domain used by the player, it is recommended that you provide a regular expression that matches as close as possible the player URL, so that only the correct iframes get selected.

<!-- Multiple videos embedded on the page -->
<iframe
  style="border: none; width: 100%; aspect-ratio: 16/9;"
  src="//my.custom-domain.com/watch?video-id=1&player-id=123&channel-id=123"
  allowfullscreen
  allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share;"
  frameborder="0"
></iframe>
<iframe
  style="border: none; width: 100%; aspect-ratio: 16/9;"
  src="//my.custom-domain.com/watch?video-id=2&player-id=123&channel-id=123"
  allowfullscreen
  allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share;"
  frameborder="0"
></iframe>

<!-- Another iframe in the same domain, but not a video player -->
<iframe src="//my.custom-domain.com/another-page"></iframe>

<script type="module">
  import { Player } from 'https://e.video-cdn.net/mi-player-sdk/mi-player-sdk.js';

  // Filter only iframes with the correct domain and /watch URL
  Player.setCustomDomains([/^\/\/my\.custom-domain\.com\/watch/i]);

  // Initialize all players on the page
  const players = Player.allPlayers().forEach((player) => {
    const videoId = player.getVideoId();

    console.log(`Player SDK connected to video '${videoId}'`);
  });
</script>
Copy

Notes

• Always call Player.setCustomDomains() before creating any player instances.
• You can provide an array of strings (for exact domain matches) or regular expressions (for pattern matching on the entire iframe URL).
• Custom domains will also be used by Player.allPlayers() to filter which iframes in your page are valid players.
• When using regular expressions, be as much specific as possible, to avoid conflicts or security issues.