diff --git a/.github/release-please/.release-please-manifest.json b/.github/release-please/.release-please-manifest.json
index df564d87..0629b24f 100644
--- a/.github/release-please/.release-please-manifest.json
+++ b/.github/release-please/.release-please-manifest.json
@@ -13,6 +13,7 @@
   "packages/super-media-element": "1.4.2",
   "packages/tiktok-video-element": "0.1.2",
   "packages/peertube-video-element": "1.1.0",
+  "packages/gumlet-video-element": "0.1.0",
   "packages/twitch-video-element": "0.2.0",
   "packages/videojs-video-element": "1.4.8",
   "packages/vimeo-video-element": "1.7.2",
diff --git a/.github/release-please/release-please-config.json b/.github/release-please/release-please-config.json
index 6f039171..92becc89 100644
--- a/.github/release-please/release-please-config.json
+++ b/.github/release-please/release-please-config.json
@@ -20,6 +20,7 @@
     "packages/super-media-element": {},
     "packages/tiktok-video-element": {},
     "packages/peertube-video-element": {},
+    "packages/gumlet-video-element": {},
     "packages/twitch-video-element": {},
     "packages/videojs-video-element": {},
     "packages/vimeo-video-element": {},
diff --git a/README.md b/README.md
index 22482ead..e1c68a7e 100644
--- a/README.md
+++ b/README.md
@@ -22,6 +22,7 @@ A collection of HTMLMediaElement compatible elements and add-ons.
 | [`<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.                                    |
+| [`<gumlet-video>`](packages/gumlet-video-element)                                    | A custom video element for Gumlet player.                                      |
 
 ## Browser support
 
diff --git a/examples/nextjs/app/gumlet-video/page.tsx b/examples/nextjs/app/gumlet-video/page.tsx
new file mode 100644
index 00000000..70cc04c1
--- /dev/null
+++ b/examples/nextjs/app/gumlet-video/page.tsx
@@ -0,0 +1,23 @@
+import { Metadata } from 'next';
+import GumletVideo from 'gumlet-video-element/react';
+import Player from '../player';
+
+export const metadata: Metadata = {
+  title: 'Gumlet Video - Media Elements',
+};
+
+export default function Page() {
+  return (
+    <>
+      <section>
+        <Player
+          as={GumletVideo}
+          src="https://play.gumlet.io/embed/64bfb0913ed6e5096d66dc1e"
+          config={{
+            start_high_res: true,
+          }}
+        />
+      </section>
+    </>
+  );
+}
diff --git a/examples/nextjs/app/sidebar-nav.tsx b/examples/nextjs/app/sidebar-nav.tsx
index 9e69378f..e777208a 100644
--- a/examples/nextjs/app/sidebar-nav.tsx
+++ b/examples/nextjs/app/sidebar-nav.tsx
@@ -47,6 +47,9 @@ export default function SidebarNav() {
       <li>
         <Link className={`link ${pathname === '/peertube-video' ? 'active' : ''}`} href="/peertube-video">peertube-video</Link>
       </li>
+      <li>
+        <Link className={`link ${pathname === '/gumlet-video' ? 'active' : ''}`} href="/gumlet-video">gumlet-video</Link>
+      </li>
       <li>
         <Link className={`link ${pathname === '/spotify-audio' ? 'active' : ''}`} href="/spotify-audio">spotify-audio</Link>
       </li>
diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
index 5bc3f1e5..e22ed7fc 100644
--- a/examples/nextjs/package.json
+++ b/examples/nextjs/package.json
@@ -21,6 +21,7 @@
     "shaka-video-element": "^0.7.1",
     "spotify-audio-element": "^1.0.4",
     "peertube-video-element": "^1.1.0",
+    "gumlet-video-element": "^0.1.0",
     "tiktok-video-element": "^0.1.2",
     "twitch-video-element": "^0.2.0",
     "videojs-video-element": "^1.4.8",
diff --git a/package-lock.json b/package-lock.json
index 9be986d5..a3740627 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,10 +31,12 @@
         "@mux/mux-video-react": "^0.26.0",
         "cloudflare-video-element": "^1.3.5",
         "dash-video-element": "^0.3.2",
+        "gumlet-video-element": "^0.1.0",
         "hls-video-element": "^1.5.11",
         "jwplayer-video-element": "^1.3.5",
         "next": "^15.1.11",
         "open-props": "^1.7.8",
+        "peertube-video-element": "^1.1.0",
         "react": "^19.2.4",
         "react-dom": "^19.2.4",
         "shaka-video-element": "^0.7.1",
@@ -3891,6 +3893,10 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/gumlet-video-element": {
+      "resolved": "packages/gumlet-video-element",
+      "link": true
+    },
     "node_modules/has-bigints": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
@@ -7605,6 +7611,15 @@
         "wet-run": "^1.2.5"
       }
     },
+    "packages/gumlet-video-element": {
+      "version": "0.1.0",
+      "license": "MIT",
+      "devDependencies": {
+        "build-react-wrapper": "^0.2.4",
+        "npm-run-all": "^4.1.5",
+        "wet-run": "^1.2.5"
+      }
+    },
     "packages/hls-video-element": {
       "version": "1.5.11",
       "license": "MIT",
diff --git a/packages/gumlet-video-element/CHANGELOG.md b/packages/gumlet-video-element/CHANGELOG.md
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/gumlet-video-element/README.md b/packages/gumlet-video-element/README.md
new file mode 100644
index 00000000..064fc245
--- /dev/null
+++ b/packages/gumlet-video-element/README.md
@@ -0,0 +1,83 @@
+# `<gumlet-video>`
+
+[![NPM Version](https://img.shields.io/npm/v/gumlet-video-element?style=flat-square&color=informational)](https://www.npmjs.com/package/gumlet-video-element)
+[![NPM Downloads](https://img.shields.io/npm/dm/gumlet-video-element?style=flat-square&color=informational&label=npm)](https://www.npmjs.com/package/gumlet-video-element)
+[![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/gumlet-video-element?style=flat-square&color=%23FF5627)](https://www.jsdelivr.com/package/npm/gumlet-video-element)
+[![npm bundle size](https://img.shields.io/bundlephobia/minzip/gumlet-video-element?style=flat-square&color=success&label=gzip)](https://bundlephobia.com/result?p=gumlet-video-element)
+
+A [custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)
+for the [Gumlet](https://www.gumlet.com/) 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)
+
+## Example
+
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/gumlet-video-element@0"></script>
+<gumlet-video
+  controls
+  src="https://play.gumlet.io/embed/64bfb0913ed6e5096d66dc1e"
+></gumlet-video>
+```
+
+## Installing
+
+`<gumlet-video>` is packaged as a javascript module (es6) only, which is supported by all evergreen browsers and Node v12+.
+
+### Loading into your HTML using `<script>`
+
+Note the `type="module"`, that's important.
+
+> Modules are always loaded asynchronously by the browser, so it's ok to load them in the head, and best for registering web components quickly.
+
+```html
+<head>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/gumlet-video-element@0"></script>
+</head>
+```
+
+### Adding to your app via `npm`
+
+```bash
+npm install gumlet-video-element --save
+```
+
+Or yarn:
+
+```bash
+yarn add gumlet-video-element
+```
+
+Include in your app javascript (e.g. src/App.js):
+
+```js
+import 'gumlet-video-element';
+```
+
+This will register the custom elements with the browser so they can be used as HTML.
+
+### React
+
+```jsx
+import GumletVideo from 'gumlet-video-element/react';
+
+export default function Player() {
+  return (
+    <GumletVideo
+      controls
+      src="https://play.gumlet.io/embed/64bfb0913ed6e5096d66dc1e"
+      config={{ start_high_res: true }}
+    />
+  );
+}
+```
+
+## Related
+
+- [Gumlet Player.js](https://docs.gumlet.com/docs/playerjs)
+- [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)
+- [`<vimeo-video>`](https://github.com/muxinc/media-elements/tree/main/packages/vimeo-video-element)
+- [`<tiktok-video>`](https://github.com/muxinc/media-elements/tree/main/packages/tiktok-video-element)
diff --git a/packages/gumlet-video-element/gumlet-video-element.d.ts b/packages/gumlet-video-element/gumlet-video-element.d.ts
new file mode 100644
index 00000000..b5d483e4
--- /dev/null
+++ b/packages/gumlet-video-element/gumlet-video-element.d.ts
@@ -0,0 +1,43 @@
+export const MATCH_SRC: RegExp;
+
+export function canPlay(src: string): boolean;
+
+export interface GumletConfig {
+  /** Start playback automatically */
+  autoplay?: boolean;
+  /** Start muted */
+  muted?: boolean;
+  /** Loop playback */
+  loop?: boolean;
+  /** Start time in seconds */
+  t?: number;
+  /** DRM token for protected content */
+  drm_token?: string;
+  /** VAST tag URL for ads */
+  vast_tag_url?: string;
+  /** Start in highest available resolution */
+  start_high_res?: boolean;
+  /** Disable seek controls */
+  disable_seek?: boolean;
+  /** Hide all player controls */
+  disable_player_controls?: boolean;
+  /** Watermark text overlay */
+  watermark_text?: string;
+  [key: string]: unknown;
+}
+
+export default class GumletVideoElement extends HTMLVideoElement {
+  static readonly observedAttributes: string[];
+  static getTemplateHTML: (
+    attrs: Record<string, string>,
+    props?: { config?: GumletConfig | null }
+  ) => string;
+  config: GumletConfig | null;
+  attributeChangedCallback(
+    attrName: string,
+    oldValue?: string | null,
+    newValue?: string | null
+  ): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+}
diff --git a/packages/gumlet-video-element/gumlet-video-element.js b/packages/gumlet-video-element/gumlet-video-element.js
new file mode 100644
index 00000000..d3d62b44
--- /dev/null
+++ b/packages/gumlet-video-element/gumlet-video-element.js
@@ -0,0 +1,670 @@
+// https://docs.gumlet.com/docs/playerjs
+
+export const MATCH_SRC = /play\.gumlet\.io\/embed\/([a-zA-Z0-9_-]+)($|\?)/;
+
+const API_URL = 'https://cdn.jsdelivr.net/npm/@gumlet/player.js@3/dist/main.global.js';
+const API_GLOBAL = 'playerjs';
+const PLAYER_EVENTS = [
+  'ready',
+  'play',
+  'pause',
+  'ended',
+  'timeupdate',
+  'progress',
+  'seeked',
+  'error',
+  'volumeChange',
+  'playbackRateChange',
+  'pipChange',
+];
+
+export function canPlay(src) {
+  return MATCH_SRC.test(src);
+}
+
+function getTemplateHTML(attrs, props = {}) {
+  const iframeAttrs = {
+    src: serializeIframeUrl(attrs, props) || '',
+    frameborder: 0,
+    width: '100%',
+    height: '100%',
+    allow: 'accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture; fullscreen',
+    allowfullscreen: '',
+    loading: 'lazy',
+    title: 'Gumlet video player',
+  };
+
+  if (props.config) {
+    // Serialize Gumlet config on iframe so it can be quickly accessed on first load.
+    // Required for React SSR because the custom element is initialized long before React client render.
+    iframeAttrs['data-config'] = JSON.stringify(props.config);
+  }
+
+  return /*html*/ `
+    <style>
+      :host {
+        display: inline-block;
+        min-width: 300px;
+        min-height: 150px;
+        position: relative;
+      }
+      iframe {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border: 0;
+      }
+      :host(:not([controls])) {
+        pointer-events: none;
+      }
+    </style>
+    <iframe${serializeAttributes(iframeAttrs)}></iframe>
+  `;
+}
+
+function serializeIframeUrl(attrs, props = {}) {
+  if (!attrs.src) return;
+
+  const matches = attrs.src.match(MATCH_SRC);
+  if (!matches) return;
+
+  const url = new URL(attrs.src);
+  const params = {
+    ...(props.config || {}),
+  };
+
+  if ('autoplay' in attrs) params.autoplay = true;
+  if ('muted' in attrs) params.muted = true;
+  if ('loop' in attrs) params.loop = true;
+  if (!('controls' in attrs)) params.disable_player_controls = true;
+
+  for (const [key, value] of Object.entries(params)) {
+    if (value == null) continue;
+    if (value === false) {
+      url.searchParams.delete(key);
+      continue;
+    }
+    url.searchParams.set(key, value === true || value === '' ? 'true' : String(value));
+  }
+
+  return url.toString();
+}
+
+class GumletVideoElement extends (globalThis.HTMLElement ?? class {}) {
+  static getTemplateHTML = getTemplateHTML;
+  static shadowRootOptions = { mode: 'open' };
+  static observedAttributes = [
+    'autoplay',
+    'controls',
+    'loop',
+    'muted',
+    'playsinline',
+    'src',
+  ];
+
+  loadComplete = new PublicPromise();
+  #loadRequested;
+  #hasLoaded;
+  #muted = false;
+  #paused = true;
+  #currentTime = 0;
+  #duration = NaN;
+  #volume = 1;
+  #playbackRate = 1;
+  #readyState = 0;
+  #seeking = false;
+  #config = null;
+  #iframe = null;
+  #api = null;
+  #wasDisconnected = false;
+
+  constructor() {
+    super();
+    this.#upgradeProperty('config');
+  }
+
+  get config() {
+    return this.#config;
+  }
+
+  set config(value) {
+    if (JSON.stringify(this.#config) === JSON.stringify(value)) return;
+    this.#config = value;
+    this.load();
+  }
+
+  get api() {
+    return this.#api;
+  }
+
+  async load() {
+    if (this.#loadRequested) return;
+
+    const isFirstLoad = !this.#hasLoaded;
+
+    // Wait 1 tick to allow other attributes to be set.
+    this.#loadRequested = Promise.resolve();
+    await this.#loadRequested;
+    this.#loadRequested = null;
+
+    if (!this.isConnected) {
+      this.#hasLoaded = null;
+      return;
+    }
+
+    if (!this.src) {
+      // Nothing to load. Leave loadComplete and #hasLoaded untouched so
+      // callers awaiting the existing loadComplete aren't orphaned if a
+      // later load() (e.g. triggered by a subsequent src) replaces it.
+      this.#resetPlaybackState();
+      this.#teardownApi();
+      this.dispatchEvent(new Event('emptied'));
+      if (this.shadowRoot) this.shadowRoot.innerHTML = '';
+      return;
+    }
+
+    if (!canPlay(this.src)) {
+      this.#resetPlaybackState();
+      this.#teardownApi();
+      this.dispatchEvent(new Event('emptied'));
+      if (this.#hasLoaded) this.loadComplete = new PublicPromise();
+      this.#hasLoaded = true;
+      this.#settleLoad(new Error('Invalid Gumlet src'));
+      return;
+    }
+
+    if (!this.shadowRoot) {
+      this.attachShadow(GumletVideoElement.shadowRootOptions);
+    }
+
+    let iframe = this.shadowRoot.querySelector('iframe');
+    const attrs = namedNodeMapToObject(this.attributes);
+    // Keep the SSR iframe; rebuild after disconnect so Player.js doesn't miss `ready`.
+    const isSsrHydration = Boolean(iframe) && isFirstLoad && !this.#wasDisconnected;
+
+    if (isSsrHydration) {
+      try {
+        this.#config = JSON.parse(iframe.getAttribute('data-config') || '{}');
+      } catch {
+        this.#config = null;
+      }
+    }
+
+    const nextSrc = serializeIframeUrl(attrs, this);
+    const shouldRebuild =
+      !isSsrHydration && (!iframe?.src || iframe.src !== nextSrc || this.#wasDisconnected);
+
+    // Same embed URL: keep the existing Player.js instance so reloads
+    // (e.g. toggling `controls`) don't stack listeners on one iframe.
+    if (!shouldRebuild && this.#api) {
+      this.#wasDisconnected = false;
+      return;
+    }
+
+    this.#resetPlaybackState();
+    this.#teardownApi();
+    this.dispatchEvent(new Event('emptied'));
+
+    if (this.#hasLoaded) this.loadComplete = new PublicPromise();
+    this.#hasLoaded = true;
+
+    this.dispatchEvent(new Event('loadstart'));
+
+    try {
+      const playerjs = await loadScript(API_URL, API_GLOBAL);
+      if (!this.isConnected) {
+        this.#hasLoaded = null;
+        return;
+      }
+      if (!playerjs?.Player) {
+        throw new Error('Player.js failed to load');
+      }
+
+      if (shouldRebuild) {
+        this.shadowRoot.innerHTML = getTemplateHTML(attrs, this);
+        iframe = this.shadowRoot.querySelector('iframe');
+      }
+      this.#wasDisconnected = false;
+
+      this.#iframe = iframe;
+      if (!iframe) {
+        this.#settleLoad(new Error('Failed to create iframe'));
+        return;
+      }
+
+      const api = new playerjs.Player(iframe);
+      this.#api = api;
+      this.#bindApi(api);
+
+      // Player.js starts its handshake from iframe onload. SSR (and any
+      // iframe that finished loading during the CDN fetch) has already
+      // fired onload, so retrigger it now that the Player is listening.
+      if (isSsrHydration) {
+        iframe.src = `${iframe.src}`;
+      }
+    } catch (error) {
+      this.#teardownApi();
+      this.#settleLoad(error);
+    }
+  }
+
+  #settleLoad(error) {
+    if (error) this.dispatchEvent(new Event('error'));
+    this.loadComplete.resolve();
+  }
+
+  #resetPlaybackState() {
+    this.#currentTime = 0;
+    this.#duration = NaN;
+    this.#muted = this.defaultMuted;
+    this.#paused = true;
+    this.#playbackRate = 1;
+    this.#readyState = 0;
+    this.#seeking = false;
+    this.#volume = 1;
+  }
+
+  #teardownApi() {
+    if (this.#api) {
+      for (const event of PLAYER_EVENTS) {
+        try {
+          this.#api.off?.(event);
+        } catch {
+          // Player.js may not implement off() for every event name.
+        }
+      }
+    }
+    this.#api = null;
+    this.#iframe = null;
+  }
+
+  #bindApi(api) {
+    const on = (event, handler) => {
+      api.on(event, (...args) => {
+        if (this.#api !== api) return;
+        return handler(...args);
+      });
+    };
+
+    on('ready', async () => {
+      this.#readyState = 1; // HTMLMediaElement.HAVE_METADATA
+
+      try {
+        if (this.loop) await api.setLoop?.(true);
+        if (this.muted) await api.mute?.();
+
+        const [duration, volume, muted] = await Promise.all([
+          api.getDuration?.() ?? Promise.resolve(NaN),
+          api.getVolume?.() ?? Promise.resolve(this.#volume * 100),
+          api.getMuted?.() ?? Promise.resolve(this.#muted),
+        ]);
+
+        if (typeof duration === 'number') this.#duration = duration;
+        if (typeof volume === 'number') this.#volume = volume / 100;
+        if (typeof muted === 'boolean') this.#muted = muted;
+      } catch {
+        // Ignore transient player.js errors while initial state syncs.
+      }
+
+      if (this.#api !== api) return;
+
+      this.dispatchEvent(new Event('loadedmetadata'));
+      this.dispatchEvent(new Event('durationchange'));
+      this.dispatchEvent(new Event('volumechange'));
+      this.dispatchEvent(new Event('loadcomplete'));
+      this.loadComplete.resolve();
+    });
+
+    on('play', () => {
+      const wasPaused = this.#paused;
+      this.#paused = false;
+      this.#readyState = 3; // HTMLMediaElement.HAVE_FUTURE_DATA
+      if (!wasPaused) return;
+      this.dispatchEvent(new Event('play'));
+      this.dispatchEvent(new Event('playing'));
+    });
+
+    on('pause', () => {
+      this.#paused = true;
+      this.dispatchEvent(new Event('pause'));
+    });
+
+    on('ended', () => {
+      this.#paused = true;
+      this.dispatchEvent(new Event('ended'));
+    });
+
+    on('timeupdate', (data) => {
+      if (data?.seconds != null) this.#currentTime = data.seconds;
+      if (data?.duration != null) {
+        this.#duration = data.duration;
+        this.dispatchEvent(new Event('durationchange'));
+      }
+      this.dispatchEvent(new Event('timeupdate'));
+    });
+
+    on('progress', () => {
+      this.dispatchEvent(new Event('progress'));
+    });
+
+    on('seeked', (data) => {
+      this.#seeking = false;
+      if (typeof data === 'number') {
+        this.#currentTime = data;
+      } else if (data?.seconds != null) {
+        this.#currentTime = data.seconds;
+      }
+      this.dispatchEvent(new Event('seeked'));
+    });
+
+    on('error', () => {
+      this.dispatchEvent(new Event('error'));
+      this.loadComplete.resolve();
+    });
+
+    on('volumeChange', async () => {
+      try {
+        const [volume, muted] = await Promise.all([
+          api.getVolume?.() ?? Promise.resolve(this.#volume * 100),
+          api.getMuted?.() ?? Promise.resolve(this.#muted),
+        ]);
+        if (typeof volume === 'number') this.#volume = volume / 100;
+        if (typeof muted === 'boolean') this.#muted = muted;
+      } catch {
+        // Ignore transient player.js errors while volume state syncs.
+      }
+      if (this.#api !== api) return;
+      this.dispatchEvent(new Event('volumechange'));
+    });
+
+    on('playbackRateChange', async () => {
+      try {
+        const rate = await api.getPlaybackRate?.();
+        if (typeof rate === 'number') this.#playbackRate = rate;
+      } catch {
+        // Ignore transient player.js errors while rate state syncs.
+      }
+      if (this.#api !== api) return;
+      this.dispatchEvent(new Event('ratechange'));
+    });
+
+    on('pipChange', (data) => {
+      const inPip = typeof data === 'boolean' ? data : Boolean(data?.isPIP ?? data?.pip);
+      this.dispatchEvent(new Event(inPip ? 'enterpictureinpicture' : 'leavepictureinpicture'));
+    });
+  }
+
+  async attributeChangedCallback(attrName, oldValue, newValue) {
+    if (oldValue === newValue) return;
+
+    // This is required to come before the await for resolving loadComplete.
+    switch (attrName) {
+      case 'autoplay':
+      case 'controls':
+      case 'src': {
+        this.load();
+        return;
+      }
+    }
+
+    await this.loadComplete;
+
+    switch (attrName) {
+      case 'loop': {
+        await this.#api?.setLoop?.(this.loop);
+        break;
+      }
+      case 'muted': {
+        this.muted = newValue != null;
+        break;
+      }
+    }
+  }
+
+  connectedCallback() {
+    if (this.src && !this.#hasLoaded) {
+      this.load();
+    }
+  }
+
+  disconnectedCallback() {
+    this.#wasDisconnected = true;
+    this.#loadRequested = null;
+    this.#hasLoaded = null;
+    this.loadComplete = new PublicPromise();
+    this.#teardownApi();
+  }
+
+  async play() {
+    this.#paused = false;
+    this.dispatchEvent(new Event('play'));
+
+    await this.loadComplete;
+
+    if (!this.#api) {
+      this.#paused = true;
+      this.dispatchEvent(new Event('pause'));
+      throw new Error('The element has no supported sources.');
+    }
+
+    try {
+      await this.#api.play();
+      this.#readyState = 3; // HTMLMediaElement.HAVE_FUTURE_DATA
+      this.dispatchEvent(new Event('playing'));
+    } catch (error) {
+      this.#paused = true;
+      this.dispatchEvent(new Event('pause'));
+      throw error;
+    }
+  }
+
+  async pause() {
+    await this.loadComplete;
+    return this.#api?.pause?.();
+  }
+
+  get ended() {
+    return Number.isFinite(this.#duration) && this.#currentTime >= this.#duration;
+  }
+
+  get seeking() {
+    return this.#seeking;
+  }
+
+  get readyState() {
+    return this.#readyState;
+  }
+
+  get src() {
+    return this.getAttribute('src');
+  }
+
+  set src(val) {
+    if (this.src == val) return;
+    this.setAttribute('src', `${val}`);
+  }
+
+  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 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.#seeking = true;
+    this.#currentTime = val;
+    this.dispatchEvent(new Event('seeking'));
+    this.loadComplete.then(() => {
+      this.#api?.setCurrentTime?.(val)?.catch?.(() => {});
+    });
+  }
+
+  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 (this.muted == val) return;
+    this.#muted = val;
+    this.loadComplete.then(() => {
+      if (val) this.#api?.mute?.();
+      else this.#api?.unmute?.();
+    });
+  }
+
+  get playbackRate() {
+    return this.#playbackRate;
+  }
+
+  set playbackRate(val) {
+    if (this.playbackRate == val) return;
+    this.#playbackRate = val;
+    this.loadComplete.then(() => {
+      this.#api?.setPlaybackRate?.(val)?.catch?.(() => {});
+    });
+  }
+
+  get playsInline() {
+    return this.hasAttribute('playsinline');
+  }
+
+  set playsInline(val) {
+    if (this.playsInline == val) return;
+    this.toggleAttribute('playsinline', Boolean(val));
+  }
+
+  get volume() {
+    return this.#volume;
+  }
+
+  set volume(val) {
+    if (this.volume == val) return;
+    this.#volume = val;
+    this.loadComplete.then(() => {
+      this.#api?.setVolume?.(Math.round(val * 100))?.catch?.(() => {});
+    });
+  }
+
+  // https://web.dev/custom-elements-best-practices/#make-properties-lazy
+  #upgradeProperty(prop) {
+    if (Object.prototype.hasOwnProperty.call(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 namedNodeMapToObject(namedNodeMap) {
+  let obj = {};
+  for (let attr of namedNodeMap) {
+    obj[attr.name] = attr.value;
+  }
+  return obj;
+}
+
+const loadScriptCache = {};
+async function loadScript(src, globalName) {
+  if (loadScriptCache[src]) return loadScriptCache[src];
+  if (globalName && self[globalName]) {
+    await delay(0);
+    return self[globalName];
+  }
+  return (loadScriptCache[src] = new Promise(function (resolve, reject) {
+    const script = document.createElement('script');
+    script.src = src;
+    script.onload = () => resolve(self[globalName]);
+    script.onerror = reject;
+    document.head.append(script);
+  }));
+}
+
+const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+/**
+ * A utility to create Promises with convenient public resolve and reject methods.
+ * @return {Promise}
+ */
+class PublicPromise extends Promise {
+  constructor(executor = () => {}) {
+    let res, rej;
+    super((resolve, reject) => {
+      executor(resolve, reject);
+      res = resolve;
+      rej = reject;
+    });
+    this.resolve = res;
+    this.reject = rej;
+  }
+}
+
+if (globalThis.customElements && !globalThis.customElements.get('gumlet-video')) {
+  globalThis.customElements.define('gumlet-video', GumletVideoElement);
+}
+
+export default GumletVideoElement;
diff --git a/packages/gumlet-video-element/index.html b/packages/gumlet-video-element/index.html
new file mode 100644
index 00000000..7fda7aa3
--- /dev/null
+++ b/packages/gumlet-video-element/index.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html>
+  <head>
+    <title>&lt;gumlet-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,
+      gumlet-video {
+        display: block;
+        width: 100%;
+        aspect-ratio: 16 / 9;
+        background: #000;
+      }
+    </style>
+    <script type="module" src="./gumlet-video-element.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/media-chrome/+esm"></script>
+  </head>
+  <body>
+    <h1>&lt;gumlet-video&gt;</h1>
+    <br />
+
+    <gumlet-video
+      id="t1"
+      muted
+      controls
+      src="https://play.gumlet.io/embed/64bfb0913ed6e5096d66dc1e"
+    ></gumlet-video>
+
+    <br />
+    <br />
+
+    <h2>With <a href="https://github.com/muxinc/media-chrome" target="_blank">Media Chrome</a></h2>
+
+    <media-controller>
+      <gumlet-video
+        id="t2"
+        src="https://play.gumlet.io/embed/64bfb0913ed6e5096d66dc1e"
+        slot="media"
+        muted
+      ></gumlet-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/gumlet-video-element/package.json b/packages/gumlet-video-element/package.json
new file mode 100644
index 00000000..cbb644ca
--- /dev/null
+++ b/packages/gumlet-video-element/package.json
@@ -0,0 +1,69 @@
+{
+  "name": "gumlet-video-element",
+  "version": "0.1.0",
+  "description": "A custom element for the Gumlet 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/gumlet-video-element"
+  },
+  "files": [
+    "gumlet-video-element.d.ts",
+    "dist"
+  ],
+  "type": "module",
+  "types": "./dist/gumlet-video-element.d.ts",
+  "main": "./dist/gumlet-video-element.js",
+  "exports": {
+    ".": {
+      "types": "./dist/gumlet-video-element.d.ts",
+      "import": "./dist/gumlet-video-element.js",
+      "require": "./dist/cjs/gumlet-video-element.js",
+      "default": "./dist/gumlet-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/gumlet-video-element.d.ts"
+      ]
+    }
+  },
+  "scripts": {
+    "lint": "eslint *.js",
+    "test": "wet run",
+    "serve": "wet serve --cors",
+    "build:react": "build-react-wrapper",
+    "build": "run-s build:*"
+  },
+  "devDependencies": {
+    "build-react-wrapper": "^0.2.4",
+    "npm-run-all": "^4.1.5",
+    "wet-run": "^1.2.5"
+  },
+  "keywords": [
+    "gumlet",
+    "video",
+    "player",
+    "web component",
+    "custom element"
+  ]
+}
diff --git a/packages/gumlet-video-element/test/index.html b/packages/gumlet-video-element/test/index.html
new file mode 100644
index 00000000..43512582
--- /dev/null
+++ b/packages/gumlet-video-element/test/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+
+<script type="importmap">
+  {
+    "imports": {
+      "zora": "https://cdn.jsdelivr.net/npm/zora/dist/index.js"
+    }
+  }
+</script>
+
+<script>
+  ZORA_TIMEOUT = 10000;
+</script>
+
+<script type="module" src="../gumlet-video-element.js"></script>
+<script type="module" src="./test.js"></script>
diff --git a/packages/gumlet-video-element/test/test.js b/packages/gumlet-video-element/test/test.js
new file mode 100644
index 00000000..dcf67cc0
--- /dev/null
+++ b/packages/gumlet-video-element/test/test.js
@@ -0,0 +1,167 @@
+import { test } from 'zora';
+import GumletVideoElement, { canPlay, MATCH_SRC } from '../gumlet-video-element.js';
+
+test('canPlay matches Gumlet embed URLs', (t) => {
+  t.ok(canPlay('https://play.gumlet.io/embed/64bfb0913ed6e5096d66dc1e'));
+  t.ok(canPlay('https://play.gumlet.io/embed/64bfb0913ed6e5096d66dc1e?autoplay=true'));
+  t.ok(MATCH_SRC.test('https://play.gumlet.io/embed/abc_123-xyz'));
+  t.notOk(canPlay('https://example.com/video'));
+  t.notOk(canPlay('https://play.gumlet.io/watch/64bfb0913ed6e5096d66dc1e'));
+});
+
+test('registers custom element', (t) => {
+  t.ok(customElements.get('gumlet-video'));
+  t.ok(GumletVideoElement);
+});
+
+function createVideoElement() {
+  return fixture(`<gumlet-video
+    src="https://play.gumlet.io/embed/64bfb0913ed6e5096d66dc1e"
+    muted
+  ></gumlet-video>`);
+}
+
+test('has default video props', async function (t) {
+  const video = await createVideoElement();
+
+  t.equal(video.paused, true, 'is paused on initialization');
+
+  await video.loadComplete;
+
+  t.equal(video.paused, true, 'is paused after load');
+  t.ok(!video.ended, 'is not ended');
+  t.ok(video.muted, 'is muted');
+});
+
+test('loop', async function (t) {
+  const video = await createVideoElement();
+  await video.loadComplete;
+
+  t.ok(!video.loop, 'loop is false by default');
+  video.loop = true;
+  t.ok(video.loop, 'loop is true');
+});
+
+test('volume', async function (t) {
+  const video = await createVideoElement();
+  await video.loadComplete;
+
+  video.volume = 1;
+  await delay(100);
+  t.equal(video.volume, 1, 'is all turned up');
+  video.volume = 0.5;
+  await delay(100);
+  t.equal(video.volume, 0.5, 'is half volume');
+});
+
+test('reloads after disconnect and reconnect', async function (t) {
+  const video = await createVideoElement();
+  await video.loadComplete;
+
+  const firstLoad = video.loadComplete;
+  video.remove();
+
+  t.ok(firstLoad !== video.loadComplete, 'creates a new loadComplete');
+
+  let resolvedAfterDisconnect = false;
+  video.loadComplete.then(() => {
+    resolvedAfterDisconnect = true;
+  });
+  await delay(0);
+  t.ok(!resolvedAfterDisconnect, 'loadComplete is pending after disconnect');
+
+  document.body.append(video);
+  await video.loadComplete;
+
+  t.ok(video.api, 'rebinds player.js after reconnect');
+  t.ok(video.paused, 'is paused after reload');
+});
+
+test('clearing src does not orphan loadComplete', async function (t) {
+  const video = await createVideoElement();
+  await video.loadComplete;
+
+  const loaded = video.loadComplete;
+  video.removeAttribute('src');
+  await delay(0);
+
+  t.equal(video.loadComplete, loaded, 'keeps the resolved loadComplete');
+  t.equal(await Promise.race([
+    video.loadComplete.then(() => 'resolved'),
+    delay(50).then(() => 'timeout'),
+  ]), 'resolved', 'callers are not left hanging');
+});
+
+test('config changes reload the iframe url', async function (t) {
+  const video = await createVideoElement();
+  await video.loadComplete;
+
+  video.config = { start_high_res: true };
+  await delay(0);
+  await video.loadComplete;
+
+  const iframe = video.shadowRoot.querySelector('iframe');
+  t.ok(iframe.src.includes('start_high_res=true'), 'applies config to iframe url');
+});
+
+test('invalid src settles loadComplete', async function (t) {
+  const video = await createVideoElement();
+  await video.loadComplete;
+
+  video.src = 'https://example.com/video';
+  t.equal(await Promise.race([
+    video.loadComplete.then(() => 'settled'),
+    delay(200).then(() => 'timeout'),
+  ]), 'settled', 'does not hang on a non-Gumlet src');
+});
+
+test('hides Gumlet chrome without controls attribute', async function (t) {
+  const video = await createVideoElement();
+  await video.loadComplete;
+
+  const iframe = video.shadowRoot.querySelector('iframe');
+  t.ok(
+    iframe.src.includes('disable_player_controls=true'),
+    'forwards missing controls as disable_player_controls',
+  );
+
+  video.controls = true;
+  await delay(0);
+  await video.loadComplete;
+  t.ok(
+    !video.shadowRoot.querySelector('iframe').src.includes('disable_player_controls=true'),
+    'shows Gumlet chrome when controls is set',
+  );
+});
+
+test('play rejects without a player', async function (t) {
+  const video = await createVideoElement();
+  await video.loadComplete;
+
+  video.src = 'https://example.com/video';
+  await video.loadComplete;
+
+  let failed = false;
+  try {
+    await video.play();
+  } catch {
+    failed = true;
+  }
+  t.ok(failed, 'play() rejects');
+  t.ok(video.paused, 'stays paused');
+});
+
+function delay(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+async function fixture(html) {
+  const template = document.createElement('template');
+  template.innerHTML = html;
+  const fragment = template.content.cloneNode(true);
+  const result = fragment.children.length > 1
+    ? [...fragment.children]
+    : fragment.children[0];
+  document.body.append(fragment);
+  return result;
+}