Embed PNXPlayer on your site

PNXPlayer plays your video anywhere you can paste an iframe or a link — Circle, Kajabi, Skool, WordPress, a blog. Multi-angle replay, chapters, and searchable transcripts come along when the video ships metadata alongside it (PNXStudios-hosted videos always do).

Copy-paste embed

<iframe
  src="https://pnxstudios.com/pnxplayer/embed?src=https%3A%2F%2Fexample.com%2Fvideo%2Fmaster.m3u8&title=My%20Video"
  width="1280"
  height="720"
  style="border:0; width:100%; height:auto; aspect-ratio:16/9"
  allow="autoplay; fullscreen; picture-in-picture; encrypted-media"
  allowfullscreen
></iframe>

URL format

https://pnxstudios.com/pnxplayer/embed?src=<media>&captions=<vtt>&title=<text>

URL-encode every value.

Param Required Value
src yes https:// URL of an HLS playlist (.m3u8) or an MP4 file (.mp4)
captions no https:// URL of a WebVTT (.vtt) track. A value we can't use is ignored — the video still plays, just without captions
title no Plain-text title for the page and the link preview
  • src must point straight at a media file. Page links (a YouTube or Vimeo watch page, your own landing page) do not work.
  • http:// is rejected — a browser blocks it as mixed content inside an https iframe anyway.
  • Signed query strings are fine on media hosted outside PNXStudios. A cdn.pnxstudios.com link must stay exactly as the Share page produced it: adding a query string or #fragment to one is rejected.
  • The media host must allow cross-origin reads (Access-Control-Allow-Origin). Most CDNs do. If a video plays when you open the URL directly but not in the embed, this is almost always why.

Or just paste the link

The embed page publishes oEmbed discovery and a Twitter Player Card, so platforms that support them — Iframely-backed services like Circle, and anything honoring application/json+oembed — can render the player inline from the bare link. Paste the same /pnxplayer/embed?… URL into the post; elsewhere, use the iframe snippet above.

  • Discovery: <link rel="alternate" type="application/json+oembed" href="https://pnxstudios.com/api/oembed?url=…&format=json"> in the page head.
  • Endpoint: GET https://pnxstudios.com/api/oembed?url=<embed-url>&format=json returns an oEmbed 1.0 type: "video" payload whose html is the iframe. maxwidth / maxheight are honored. Unrecognized url → 404; any format other than json → 501.

PNXStudios customers

Don't hand-build the URL. Dashboard → Share → Embeds has a ready-made copy-link button per video. That link carries your video's CDN URL, so the preview picks up its title and poster and your engagement analytics keep counting.

Live example

If you can add script tags

The CDN bundle is lighter than an iframe and lays out with the rest of your page:

<link rel="stylesheet" href="https://cdn.pnxstudios.com/pnxstudios/pnxplayerjs/v0.8.2/pnxplayer-0.8.2.min.css">
<script src="https://cdn.pnxstudios.com/pnxstudios/pnxplayerjs/v0.8.2/pnxplayer-0.8.2.min.iife.js"></script>

<div class="pnx"
     data-src="https://example.com/video/master.m3u8"
     data-captions="https://example.com/video/captions.vtt">
  <video class="pnx__el" preload="metadata" playsinline></video>
</div>
<script>
  (function init() {
    if (window.PNXPlayer && window.PNXPlayer.upgradeAll) return window.PNXPlayer.upgradeAll(".pnx");
    setTimeout(init, 100); // some CMSs defer injected scripts
  })();
</script>

Current bundle: 0.8.2. Pin the version in your URLs and bump it when you deploy.

Notes

  • The embed page is framable from any origin and serves a Content-Security-Policy that pins script origins to PNXStudios' own CDN.
  • Videos hosted anywhere other than PNXStudios never emit PNXStudios engagement analytics.
  • React/Next.js, PHP, WordPress, Shopify, session identity, and telemetry are covered in the full developer guide — ask us at info@pnxstudios.com.