diff --git a/README.md b/README.md
index 5b9f432..6d23b7b 100644
--- a/README.md
+++ b/README.md
@@ -21,3 +21,4 @@ A collection of HTMLMediaElement compatible elements and add-ons.
 | [`<jwplayer-video>`](packages/jwplayer-video-element)                                | A custom video element for JW Player.                                          |
 | [`<twitch-video>`](packages/twitch-video-element)                                    | A custom video element for Twitch player.                                      |
 | [`<cloudflare-video>`](packages/cloudflare-video-element)                            | A custom video element for Cloudflare Stream.                                  |
+| [`<peertube-video>`](packages/peertube-video-element)                                | A custom video element for PeerTube player.                                    |
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 2671bd1..a1d38a1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1668,6 +1668,7 @@
       "integrity": "sha512-USU8ZI/xyKJwFTpjSVIrSeHBVAGagkHQKPNbxeWwql/vDmnTIBgx+TJnhFnj1NXgz8XfprU0egV2dROLGpsBEg==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -1718,6 +1719,7 @@
       "integrity": "sha512-rBnTWHCdbYM2lh7hjyXqxk70wvon3p2FyaniZuey5TrcGBpfhVp0OxOa6gxr9Q9YhZFKyfbEnxc24ZnVbbUkCA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.18.1",
         "@typescript-eslint/types": "8.18.1",
@@ -1954,6 +1956,7 @@
       "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2936,6 +2939,7 @@
       "integrity": "sha512-FuLPevChGDshgSicjisSooU0cemp/sGXR841D5LHMB7mTVOmsEHcAxaH3irL53+8YDIeVNQEySh4DaYU/iuPqQ==",
       "hasInstallScript": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "esbuild": "bin/esbuild"
       },
@@ -2989,6 +2993,7 @@
       "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -3189,6 +3194,7 @@
       "integrity": "sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.8",
@@ -4001,6 +4007,7 @@
       "integrity": "sha512-j4VkyUp2xazGJ8eCCLN1Vm/bxdvm/j5ZuU9AIjLu9vapn2M44p9L3Ktr9Vnb2RN2QtcR/wVjZVMlT5k7GJQgPw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=16.9.0"
       }
@@ -5551,6 +5558,10 @@
         "node": ">=4"
       }
     },
+    "node_modules/peertube-video-element": {
+      "resolved": "packages/peertube-video-element",
+      "link": true
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -5755,6 +5766,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
       "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5764,6 +5776,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
       "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -6806,6 +6819,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
       "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -7158,6 +7172,7 @@
       "integrity": "sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==",
       "devOptional": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -7646,6 +7661,18 @@
         "wet-run": "^1.2.5"
       }
     },
+    "packages/peertube-video-element": {
+      "version": "1.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "media-played-ranges-mixin": "^0.1.0"
+      },
+      "devDependencies": {
+        "build-react-wrapper": "^0.2.4",
+        "npm-run-all": "^4.1.5",
+        "wet-run": "^1.2.5"
+      }
+    },
     "packages/shaka-video-element": {
       "version": "0.7.0",
       "license": "MIT",
diff --git a/packages/peertube-video-element/CHANGELOG.md b/packages/peertube-video-element/CHANGELOG.md
new file mode 100644
index 0000000..e69de29
diff --git a/packages/peertube-video-element/README.md b/packages/peertube-video-element/README.md
new file mode 100644
index 0000000..05581b6
--- /dev/null
+++ b/packages/peertube-video-element/README.md
@@ -0,0 +1,57 @@
+# `<peertube-video>`
+
+[![NPM Version](https://img.shields.io/npm/v/peertube-video-element?style=flat-square&color=informational)](https://www.npmjs.com/package/peertube-video-element) 
+[![NPM Downloads](https://img.shields.io/npm/dm/peertube-video-element?style=flat-square&color=informational&label=npm)](https://www.npmjs.com/package/peertube-video-element) 
+[![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/peertube-video-element?style=flat-square&color=%23FF5627)](https://www.jsdelivr.com/package/npm/peertube-video-element)
+[![npm bundle size](https://img.shields.io/bundlephobia/minzip/peertube-video-element?style=flat-square&color=success&label=gzip)](https://bundlephobia.com/result?p=peertube-video-element) 
+
+A [custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) 
+for the PeerTube player with an API that matches the 
+[`<video>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) API.
+
+- 🏄‍♂️ Compatible [`HTMLMediaElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) API
+- 🕺 Seamlessly integrates with [Media Chrome](https://github.com/muxinc/media-chrome)
+
+
+<!-- prettier-ignore -->
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/peertube-video-element@1.0/+esm"></script>
+<peertube-video controls src="https://video.mshparisnord.fr/w/7r2FxoQdYjun6tYWJfHUCa"></peertube-video>
+```
+
+## Install
+
+First install the NPM package:
+
+```bash
+npm install peertube-video-element
+```
+
+Import in your app javascript (e.g. src/App.js):
+
+```js
+import 'peertube-video-element';
+```
+
+Optionally, you can load the script directly from a CDN using [JSDelivr](https://www.jsdelivr.com/):
+
+<!-- prettier-ignore -->
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/peertube-video-element@1.0/+esm"></script>
+```
+
+This will register the custom elements with the browser so they can be used as HTML.
+
+## Related
+
+- [Media Chrome](https://github.com/muxinc/media-chrome) Your media player's dancing suit. 🕺
+- [`<youtube-video>`](https://github.com/muxinc/media-elements/tree/main/packages/youtube-video-element) A custom element for the YouTube player.
+- [`<spotify-audio>`](https://github.com/muxinc/media-elements/tree/main/packages/spotify-audio-element) A custom element for the Spotify player.
+- [`<jwplayer-video>`](https://github.com/muxinc/media-elements/tree/main/packages/jwplayer-video-element) A custom element for the JW player.
+- [`<videojs-video>`](https://github.com/muxinc/media-elements/tree/main/packages/videojs-video-element) A custom element for Video.js.
+- [`<wistia-video>`](https://github.com/muxinc/media-elements/tree/main/packages/wistia-video-element) A custom element for the Wistia player.
+- [`<cloudflare-video>`](https://github.com/muxinc/media-elements/tree/main/packages/cloudflare-video-element) A custom element for the Cloudflare player.
+- [`<hls-video>`](https://github.com/muxinc/media-elements/tree/main/packages/hls-video-element) A custom element for playing HTTP Live Streaming (HLS) videos.
+- [`castable-video`](https://github.com/muxinc/media-elements/tree/main/packages/castable-video) Cast your video element to the big screen with ease!
+- [`<mux-player>`](https://github.com/muxinc/elements/tree/main/packages/mux-player) The official Mux-flavored video player custom element.
+- [`<mux-video>`](https://github.com/muxinc/elements/tree/main/packages/mux-video) A Mux-flavored HTML5 video element w/ hls.js and Mux data builtin.
diff --git a/packages/peertube-video-element/index.html b/packages/peertube-video-element/index.html
new file mode 100644
index 0000000..267b4a8
--- /dev/null
+++ b/packages/peertube-video-element/index.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<html>
+  <head>
+    <title>&lt;twitch-video&gt;</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css" />
+    <style>
+      body {
+        text-align: center;
+      }
+      media-controller,
+      twitch-video {
+        display: block;
+        width: 100%;
+        aspect-ratio: 16 / 9;
+        background: #000;
+      }
+    </style>
+    <script type="module" src="./peertube-video-element.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/media-chrome/+esm"></script>
+  </head>
+  <body>
+    <h1>&lt;twitch-video&gt;</h1>
+    <br />
+
+    <peertube-video id="t1" muted controls src="https://video.mshparisnord.fr/w/7r2FxoQdYjun6tYWJfHUCa"></peertube-video>
+
+    <br />
+
+    <br />
+
+    <h2>With <a href="https://github.com/muxinc/media-chrome" target="_blank">Media Chrome</a></h2>
+
+    <media-controller>
+      <peertube-video id="t2" src="https://video.mshparisnord.fr/w/7r2FxoQdYjun6tYWJfHUCa" slot="media"></peertube-video>
+      <media-control-bar>
+        <media-play-button></media-play-button>
+        <media-seek-backward-button seek-offset="15"></media-seek-backward-button>
+        <media-seek-forward-button seek-offset="15"></media-seek-forward-button>
+        <media-mute-button></media-mute-button>
+        <media-volume-range></media-volume-range>
+        <media-time-range></media-time-range>
+        <media-time-display show-duration remaining></media-time-display>
+        <media-fullscreen-button></media-fullscreen-button>
+      </media-control-bar>
+    </media-controller>
+  </body>
+</html>
diff --git a/packages/peertube-video-element/package.json b/packages/peertube-video-element/package.json
new file mode 100644
index 0000000..0fc57c8
--- /dev/null
+++ b/packages/peertube-video-element/package.json
@@ -0,0 +1,72 @@
+{
+  "name": "peertube-video-element",
+  "version": "1.0.0",
+  "description": "A custom element for the PeerTube player with an API that matches the `<video>` API",
+  "author": "@muxinc",
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/muxinc/media-elements#readme",
+  "bugs": {
+    "url": "https://github.com/muxinc/media-elements/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/muxinc/media-elements.git",
+    "directory": "packages/peertube-video-element"
+  },
+  "files": [
+    "peertube-video-element.d.ts",
+    "dist"
+  ],
+  "type": "module",
+  "types": "./dist/peertube-video-element.d.ts",
+  "main": "./dist/peertube-video-element.js",
+  "exports": {
+    ".": {
+      "types": "./dist/peertube-video-element.d.ts",
+      "import": "./dist/peertube-video-element.js",
+      "require": "./dist/cjs/peertube-video-element.js",
+      "default": "./dist/peertube-video-element.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js",
+      "require": "./dist/cjs/react.js",
+      "default": "./dist/react.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "react": [
+        "./dist/react.d.ts"
+      ],
+      "*": [
+        "./dist/peertube-video-element.d.ts"
+      ]
+    }
+  },
+  "scripts": {
+    "lint": "eslint *.js",
+    "test": "wet run",
+    "serve": "wet serve --cors",
+    "build:react": "build-react-wrapper",
+    "build": "run-s build:*"
+  },
+  "dependencies": {
+    "media-played-ranges-mixin": "^0.1.0"
+  },
+  "devDependencies": {
+    "build-react-wrapper": "^0.2.4",
+    "npm-run-all": "^4.1.5",
+    "wet-run": "^1.2.5"
+  },
+  "keywords": [
+    "peertube",
+    "video",
+    "player",
+    "web component",
+    "custom element"
+  ]
+}
diff --git a/packages/peertube-video-element/peertube-video-element.d.ts b/packages/peertube-video-element/peertube-video-element.d.ts
new file mode 100644
index 0000000..67fc775
--- /dev/null
+++ b/packages/peertube-video-element/peertube-video-element.d.ts
@@ -0,0 +1,10 @@
+export default class CustomVideoElement extends HTMLVideoElement {
+  static readonly observedAttributes: string[];
+  attributeChangedCallback(
+    attrName: string,
+    oldValue?: string | null,
+    newValue?: string | null
+  ): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+}
diff --git a/packages/peertube-video-element/peertube-video-element.js b/packages/peertube-video-element/peertube-video-element.js
new file mode 100644
index 0000000..b1d3aaa
--- /dev/null
+++ b/packages/peertube-video-element/peertube-video-element.js
@@ -0,0 +1,736 @@
+const EMBED_BASE = "/videos/embed";
+const MATCH_SRC = /(https?):\/\/([^/]+)\/(?:videos\/watch|w)\/(.+)$/;
+
+// SDK configuration
+const SDK_URL = "https://unpkg.com/@peertube/embed-api/build/player.min.js";
+const SDK_GLOBAL = "PeerTubePlayer";
+
+export function canPlay(src) {
+  return MATCH_SRC.test(src);
+}
+
+function getTemplateHTML(attrs, config) {
+  const iframeAttrs = {
+    src: serializeIframeUrl(attrs, config) || "",
+    frameborder: 0,
+    width: "100%",
+    height: "100%",
+    allow:
+      "accelerometer; fullscreen; autoplay; encrypted-media; gyroscope; picture-in-picture",
+    sandbox: "allow-same-origin allow-scripts allow-popups",
+  };
+
+  if (config) {
+    iframeAttrs["data-config"] = JSON.stringify(config);
+  }
+
+  return /*html*/ `
+    <style>
+      :host {
+        display: inline-block;
+        min-width: 300px;
+        min-height: 150px;
+        position: relative;
+      }
+      iframe {
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+      :host(:not([controls])) {
+        pointer-events: none;
+      }
+    </style>
+    <iframe${serializeAttributes(iframeAttrs)}></iframe>
+  `;
+}
+
+function serializeIframeUrl(attrs, config) {
+  if (!attrs.src) return undefined;
+
+  const matches = attrs.src.match(MATCH_SRC);
+  if (!matches) return undefined;
+
+  const protocol = matches[1];
+  const domain = matches[2];
+  const videoId = matches[3];
+
+  const params = {
+    api: 1,
+    controls: attrs.controls === "" ? 1 : 0,
+    autoplay: attrs.autoplay === "" ? 1 : 0,
+    loop: attrs.loop === "" ? 1 : 0,
+    muted: attrs.muted === "" ? 1 : 0,
+    peertubeLink: 0,
+    title: 0,
+    warningTitle: 0,
+    ...config,
+  };
+
+  return `${protocol}://${domain}${EMBED_BASE}/${videoId}?${serialize(params)}`;
+}
+
+// Store resolve functions for concurrent SDK loading attempts
+const sdkResolves = {};
+
+// Helper to access global SDK
+function getGlobalSDK() {
+  return window[SDK_GLOBAL];
+}
+
+function getSDK() {
+  return new Promise((resolve, reject) => {
+    // Check if SDK is already loaded
+    const existingSDK = getGlobalSDK();
+    if (existingSDK) {
+      resolve(existingSDK);
+      return;
+    }
+
+    // If we are already loading the SDK, add the resolve function to the array
+    if (sdkResolves[SDK_URL]) {
+      sdkResolves[SDK_URL].push(resolve);
+      return;
+    }
+    sdkResolves[SDK_URL] = [resolve];
+
+    // Check if script is already being loaded
+    const existingScript = document.querySelector(`script[src="${SDK_URL}"]`);
+    if (existingScript) {
+      existingScript.addEventListener("load", () => {
+        const sdk = getGlobalSDK();
+        if (sdkResolves[SDK_URL]) {
+          sdkResolves[SDK_URL].forEach((res) => res(sdk));
+          delete sdkResolves[SDK_URL];
+        }
+      });
+      existingScript.addEventListener("error", reject);
+      return;
+    }
+
+    // Load the script
+    const script = document.createElement("script");
+    script.src = SDK_URL;
+    script.async = true;
+    script.onload = () => {
+      const sdk = getGlobalSDK();
+      sdkResolves[SDK_URL].forEach((res) => res(sdk));
+      delete sdkResolves[SDK_URL];
+    };
+    script.onerror = reject;
+    document.head.appendChild(script);
+  });
+}
+
+/**
+ * A utility to create Promises with convenient public resolve and reject methods.
+ */
+class PublicPromise extends Promise {
+  constructor(executor = () => void 0) {
+    let res;
+    let rej;
+    super((resolve, reject) => {
+      executor(resolve, reject);
+      res = resolve;
+      rej = reject;
+    });
+    this.resolve = res;
+    this.reject = rej;
+  }
+}
+
+class PeerTubeVideoElement extends HTMLElement {
+  static getTemplateHTML = getTemplateHTML;
+  static shadowRootOptions = { mode: "open" };
+  static observedAttributes = [
+    "autoplay",
+    "controls",
+    "crossorigin",
+    "loop",
+    "muted",
+    "playsinline",
+    "poster",
+    "preload",
+    "src",
+  ];
+
+  loadComplete = new PublicPromise();
+  #loadRequested = null;
+  #hasLoaded = false;
+  #isInit = false;
+  #currentTime = 0;
+  #duration = NaN;
+  #muted = false;
+  #paused = true;
+  #playbackRate = 1;
+  #progress = 0;
+  #readyState = 0;
+  #seeking = false;
+  #volume = 1;
+  #volumeBeforeMute = 1;
+  #videoWidth = NaN;
+  #videoHeight = NaN;
+  #config = null;
+
+  api = null;
+  textTracks = null;
+
+  constructor() {
+    super();
+    this.#upgradeProperty("config");
+
+    // Initialize paused based on autoplay attribute
+    this.#paused = !this.autoplay;
+  }
+
+  /**
+   * True only when we're in a browser, connected to DOM, and API is ready.
+   * PeerTube SDK's Channel.build() throws if called without a valid window (e.g. SSR or before iframe ready).
+   */
+  #canUseApi() {
+    return (
+      typeof window !== "undefined" && this.isConnected && this.api != null
+    );
+  }
+
+  connectedCallback() {
+    // Auto-load when connected to DOM if src is present
+    if (this.src && !this.#hasLoaded) {
+      this.load();
+    }
+  }
+
+  requestFullscreen() {
+    // PeerTube doesn't expose fullscreen API directly, use iframe fullscreen
+    const iframe = this.shadowRoot?.querySelector("iframe");
+    return (
+      iframe?.requestFullscreen() ??
+      Promise.reject(new Error("No iframe found"))
+    );
+  }
+
+  get config() {
+    return this.#config;
+  }
+
+  set config(value) {
+    this.#config = value;
+  }
+
+  async load() {
+    if (this.#loadRequested) return;
+
+    const isFirstLoad = !this.#hasLoaded;
+
+    if (this.#hasLoaded) this.loadComplete = new PublicPromise();
+    this.#hasLoaded = true;
+
+    // Wait 1 tick to allow other attributes to be set.
+    await (this.#loadRequested = Promise.resolve());
+    this.#loadRequested = null;
+
+    this.#currentTime = 0;
+    this.#duration = NaN;
+    this.#muted = this.defaultMuted;
+    this.#paused = !this.autoplay;
+    this.#playbackRate = 1;
+    this.#progress = 0;
+    this.#readyState = 0;
+    this.#seeking = false;
+    this.#volume = 1;
+    this.#videoWidth = NaN;
+    this.#videoHeight = NaN;
+    this.dispatchEvent(new Event("emptied"));
+
+    const oldApi = this.api;
+    this.api = null;
+
+    if (!this.src) {
+      return;
+    }
+
+    this.dispatchEvent(new Event("loadstart"));
+
+    const onLoaded = async () => {
+      this.#readyState = 1; // HTMLMediaElement.HAVE_METADATA
+      this.dispatchEvent(new Event("loadedmetadata"));
+
+      if (this.api && typeof window !== "undefined") {
+        try {
+          // PeerTube doesn't have getMuted - infer from volume or defaultMuted attribute
+          this.#volume = await this.api.getVolume();
+          this.#muted = this.defaultMuted || this.#volume === 0;
+          this.dispatchEvent(new Event("volumechange"));
+        } catch {
+          // Channel.build() can throw if iframe not ready; keep defaults
+        }
+      }
+
+      this.dispatchEvent(new Event("loadcomplete"));
+      this.loadComplete.resolve();
+    };
+
+    // If already initialized, we need to reload the iframe
+    if (this.#isInit && oldApi) {
+      // Destroy old player and reinitialize
+      try {
+        oldApi.destroy();
+      } catch (_) {
+        // Ignore destroy errors - player may already be destroyed
+        void 0;
+      }
+      this.#isInit = false;
+    }
+
+    this.#isInit = true;
+
+    let iframe = this.shadowRoot?.querySelector("iframe");
+
+    if (isFirstLoad && iframe) {
+      const configAttr = iframe.getAttribute("data-config");
+      this.#config = configAttr ? JSON.parse(configAttr) : {};
+    }
+
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: "open" });
+      this.shadowRoot.innerHTML = getTemplateHTML(
+        namedNodeMapToObject(this.attributes),
+        this.#config ?? undefined,
+      );
+      iframe = this.shadowRoot.querySelector("iframe");
+    } else if (!iframe) {
+      this.shadowRoot.innerHTML = getTemplateHTML(
+        namedNodeMapToObject(this.attributes),
+        this.#config ?? undefined,
+      );
+      iframe = this.shadowRoot.querySelector("iframe");
+    } else {
+      // Update iframe src
+      const newSrc = serializeIframeUrl(
+        namedNodeMapToObject(this.attributes),
+        this.#config ?? undefined,
+      );
+      if (newSrc) {
+        iframe.src = newSrc;
+      }
+    }
+
+    if (!iframe) {
+      this.loadComplete.reject(new Error("Failed to create iframe"));
+      return;
+    }
+
+    try {
+      const PeerTubePlayerConstructor = await getSDK();
+      this.api = new PeerTubePlayerConstructor(iframe);
+
+      await this.api.ready;
+
+      // Set up event listeners
+      this.api.addEventListener("playbackStatusUpdate", (data) => {
+        const prevTime = this.#currentTime;
+        this.#currentTime = data.position;
+
+        if (data.duration && data.duration !== this.#duration) {
+          this.#duration = data.duration;
+          this.dispatchEvent(new Event("durationchange"));
+        }
+
+        if (prevTime !== this.#currentTime) {
+          this.dispatchEvent(new Event("timeupdate"));
+        }
+
+        // Update progress (buffered)
+        this.#progress = data.position;
+        this.dispatchEvent(new Event("progress"));
+      });
+
+      this.api.addEventListener("playbackStatusChange", (status) => {
+        if (status === "playing") {
+          if (this.#paused) {
+            this.#paused = false;
+            this.dispatchEvent(new Event("play"));
+          }
+          this.#readyState = 3; // HTMLMediaElement.HAVE_FUTURE_DATA
+          this.dispatchEvent(new Event("playing"));
+        } else if (status === "paused") {
+          this.#paused = true;
+          this.dispatchEvent(new Event("pause"));
+        } else if (status === "ended") {
+          this.#paused = true;
+          this.dispatchEvent(new Event("ended"));
+        }
+      });
+
+      // Handle resolution change for video dimensions
+      this.api.addEventListener("resolutionChange", (data) => {
+        if (data.width) this.#videoWidth = data.width;
+        if (data.height) this.#videoHeight = data.height;
+        this.dispatchEvent(new Event("resize"));
+      });
+
+      await onLoaded();
+    } catch (error) {
+      this.loadComplete.reject(error);
+      this.dispatchEvent(new ErrorEvent("error", { error }));
+    }
+
+    await this.loadComplete;
+  }
+
+  async attributeChangedCallback(attrName, oldValue, newValue) {
+    if (oldValue === newValue) return;
+
+    // These attributes trigger a reload
+    switch (attrName) {
+      case "autoplay":
+      case "controls":
+      case "src": {
+        this.load();
+        return;
+      }
+    }
+
+    await this.loadComplete;
+
+    switch (attrName) {
+      case "loop": {
+        // PeerTube doesn't have a setLoop method, handled via embed params
+        break;
+      }
+      case "muted": {
+        if (!this.#canUseApi()) break;
+        try {
+          if (this.defaultMuted) {
+            this.#volumeBeforeMute = this.#volume || 1;
+            this.api.setVolume(0).catch(() => void 0);
+          } else {
+            this.api.setVolume(this.#volumeBeforeMute).catch(() => void 0);
+          }
+        } catch {
+          // PeerTube SDK can throw before iframe ready
+        }
+        break;
+      }
+    }
+  }
+
+  async play() {
+    this.#paused = false;
+    this.dispatchEvent(new Event("play"));
+
+    await this.loadComplete;
+
+    if (!this.#canUseApi()) return;
+    try {
+      await this.api.play();
+    } catch (error) {
+      this.#paused = true;
+      this.dispatchEvent(new Event("pause"));
+      throw error;
+    }
+  }
+
+  async pause() {
+    await this.loadComplete;
+    if (!this.#canUseApi()) return;
+    try {
+      return await this.api.pause();
+    } catch {
+      return undefined;
+    }
+  }
+
+  get ended() {
+    return this.#currentTime >= this.#duration;
+  }
+
+  get seeking() {
+    return this.#seeking;
+  }
+
+  get readyState() {
+    return this.#readyState;
+  }
+
+  get videoWidth() {
+    return this.#videoWidth;
+  }
+
+  get videoHeight() {
+    return this.#videoHeight;
+  }
+
+  get src() {
+    return this.getAttribute("src");
+  }
+
+  set src(val) {
+    if (this.src === val) return;
+    if (val) {
+      this.setAttribute("src", val);
+    } else {
+      this.removeAttribute("src");
+    }
+  }
+
+  get paused() {
+    return this.#paused;
+  }
+
+  get duration() {
+    return this.#duration;
+  }
+
+  get autoplay() {
+    return this.hasAttribute("autoplay");
+  }
+
+  set autoplay(val) {
+    if (this.autoplay === val) return;
+    this.toggleAttribute("autoplay", Boolean(val));
+  }
+
+  get seekable() {
+    if (this.#duration > 0) {
+      return createTimeRanges(0, this.#duration);
+    }
+    return createTimeRanges();
+  }
+
+  get buffered() {
+    if (this.#progress > 0) {
+      return createTimeRanges(0, this.#progress);
+    }
+    return createTimeRanges();
+  }
+
+  get controls() {
+    return this.hasAttribute("controls");
+  }
+
+  set controls(val) {
+    if (this.controls === val) return;
+    this.toggleAttribute("controls", Boolean(val));
+  }
+
+  get currentTime() {
+    return this.#currentTime;
+  }
+
+  set currentTime(val) {
+    if (this.currentTime === val) return;
+    this.#currentTime = val;
+    this.#seeking = true;
+    this.dispatchEvent(new Event("seeking"));
+
+    this.loadComplete.then(() => {
+      if (!this.#canUseApi()) {
+        this.#seeking = false;
+        return;
+      }
+      try {
+        this.api.seek(val)
+          .then(() => {
+            this.#seeking = false;
+            this.dispatchEvent(new Event("seeked"));
+          })
+          .catch(() => {
+            this.#seeking = false;
+            void 0;
+          });
+      } catch {
+        this.#seeking = false;
+      }
+    });
+  }
+
+  get defaultMuted() {
+    return this.hasAttribute("muted");
+  }
+
+  set defaultMuted(val) {
+    if (this.defaultMuted === val) return;
+    this.toggleAttribute("muted", Boolean(val));
+  }
+
+  get loop() {
+    return this.hasAttribute("loop");
+  }
+
+  set loop(val) {
+    if (this.loop === val) return;
+    this.toggleAttribute("loop", Boolean(val));
+  }
+
+  get muted() {
+    return this.#muted;
+  }
+
+  set muted(val) {
+    if (val == undefined) return; // skip invalid values
+    if (this.muted === val) return;
+    this.#muted = val;
+    this.loadComplete.then(() => {
+      if (!this.#canUseApi()) return;
+      try {
+        if (val) {
+          this.#volumeBeforeMute = this.#volume || 1;
+          this.api.setVolume(0).catch(() => void 0);
+        } else {
+          this.api.setVolume(this.#volumeBeforeMute).catch(() => void 0);
+        }
+      } catch {
+        // PeerTube SDK can throw before iframe ready
+      }
+    });
+    this.dispatchEvent(new Event("volumechange"));
+  }
+
+  get playbackRate() {
+    return this.#playbackRate;
+  }
+
+  set playbackRate(val) {
+    if (this.playbackRate === val) return;
+    this.#playbackRate = val;
+    this.loadComplete.then(() => {
+      if (!this.#canUseApi()) return;
+      try {
+        this.api.setPlaybackRate(val).catch(() => void 0);
+      } catch {
+        // PeerTube SDK can throw before iframe ready
+      }
+    });
+    this.dispatchEvent(new Event("ratechange"));
+  }
+
+  get playsInline() {
+    return this.hasAttribute("playsinline");
+  }
+
+  set playsInline(val) {
+    if (this.playsInline === val) return;
+    this.toggleAttribute("playsinline", Boolean(val));
+  }
+
+  get poster() {
+    return this.getAttribute("poster");
+  }
+
+  set poster(val) {
+    if (this.poster === val) return;
+    if (val) {
+      this.setAttribute("poster", val);
+    } else {
+      this.removeAttribute("poster");
+    }
+  }
+
+  get preload() {
+    return this.getAttribute("preload");
+  }
+
+  set preload(val) {
+    if (this.preload === val) return;
+    if (val) {
+      this.setAttribute("preload", val);
+    } else {
+      this.removeAttribute("preload");
+    }
+  }
+
+  get volume() {
+    return this.#volume;
+  }
+
+  set volume(val) {
+    if (this.volume === val) return;
+    this.#volume = val;
+    this.loadComplete.then(() => {
+      if (!this.#canUseApi()) return;
+      try {
+        this.api.setVolume(val).catch(() => void 0);
+      } catch {
+        // PeerTube SDK can throw "Channel.build() called without a valid window" e.g. before iframe ready
+      }
+    });
+    this.dispatchEvent(new Event("volumechange"));
+  }
+
+  // https://web.dev/custom-elements-best-practices/#make-properties-lazy
+  #upgradeProperty(prop) {
+    if (Object.hasOwn(this, prop)) {
+      const value = this[prop];
+      delete this[prop];
+      this[prop] = value;
+    }
+  }
+}
+
+function serializeAttributes(attrs) {
+  let html = "";
+  for (const key in attrs) {
+    const value = attrs[key];
+    if (value === "") html += ` ${escapeHtml(key)}`;
+    else html += ` ${escapeHtml(key)}="${escapeHtml(`${value}`)}"`;
+  }
+  return html;
+}
+
+function escapeHtml(str) {
+  return str
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&apos;")
+    .replace(/`/g, "&#x60;");
+}
+
+function serialize(props) {
+  return String(new URLSearchParams(boolToBinary(props)));
+}
+
+function boolToBinary(props) {
+  const p = {};
+  for (const key in props) {
+    const val = props[key];
+    if (val === true || val === "") p[key] = 1;
+    else if (val === false) p[key] = 0;
+    else if (val != null) p[key] = val;
+  }
+  return p;
+}
+
+function namedNodeMapToObject(namedNodeMap) {
+  const obj = {};
+  for (const attr of namedNodeMap) {
+    obj[attr.name] = attr.value;
+  }
+  return obj;
+}
+
+/**
+ * Creates a fake `TimeRanges` object.
+ */
+function createTimeRanges(start, end) {
+  if (start == null || end == null || (start === 0 && end === 0)) {
+    return createTimeRangesObj([[0, 0]]);
+  }
+  return createTimeRangesObj([[start, end]]);
+}
+
+function createTimeRangesObj(ranges) {
+  return {
+    length: ranges.length,
+    start: (i) => ranges[i][0],
+    end: (i) => ranges[i][1],
+  };
+}
+
+if (globalThis.customElements && !globalThis.customElements.get('peertube-video')) {
+  globalThis.customElements.define('peertube-video', PeerTubeVideoElement);
+}
+
+export default PeerTubeVideoElement;