Production Snippet: High Priority

<div
  style="width: 100%;"
  data-threeplay-access-player="1"
  data-platform="<native|YouTube|Kaltura|Brightcove>"
  data-access-id="<YOUR_PROJECT_VIEW_API_ID (ask a developer)>"
  data-media-id="<YOUR_MEDIA_ID (fileID if native, external ID if YouTube)>"
>
  <div data-mount="1"></div>
  <script crossorigin="anonymous" type="module" src="https://view.3playmedia.com/assets/access-player/0.6.3/index.js"></script>
  <script>
    (function preconnect() {
  let settings =
    document.querySelector('[data-threeplay-access-player="1"]')?.dataset ||
    window.__3PLAY_ACCESS_PLAYER_SETTINGS__;

  if (!settings) {
    return;
  }

  let url;

  switch (settings.platform) {
    case "native":
      url = settings.playback;
      return;
    case "YouTube":
      url = `https://www.youtube-nocookie.com/embed/${settings.mediaId}`;
      return;
    case "Kaltura":
      url = "https://cdnapisec.kaltura.com/p/";
      return;
    case "Brightcove":
      if (settings.bcAccount) {
        url = "https://players.brightcove.net/" + settings.bcAccount + "/default_default/index.min.js";
      }
      return;
    default:
      return;
  }

  if (url) {
    fetch(url, { method: "head", mode: "no-cors" }).catch(() => {});
  }
})();

  </script>
</div>
    

Production Snippet: Low Priority (iframe)

<div style="position: relative; padding-top: calc(76px + 56.25%); width: 100%; height: 0px; margin: 0 auto; background-color: #fcfcfd; border-radius: 4px; box-shadow: 0 7px 16px 0px #16161a29;">
  <iframe
    title="3Play Access Player"
    src="https://view.3playmedia.com/assets/access-player/0.6.3/index.html?access-id=YOUR_PROJECT_VIEW_API_ID&platform=YouTube&media-id=YOUR_MEDIA_ID"
    style="border: 0; position: absolute; width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0;"
  ></iframe>
</div>