diff --git a/apps/pwa/package-lock.json b/apps/pwa/package-lock.json
index 2934e0e6..d2a18f6d 100644
--- a/apps/pwa/package-lock.json
+++ b/apps/pwa/package-lock.json
@@ -14,6 +14,7 @@
         "@profullstack/footer": "latest",
         "@profullstack/libsql-pg": "^0.1.2",
         "@profullstack/notifications": "^0.1.0",
+        "@profullstack/player": "^0.17.0",
         "@profullstack/redeem-credits": "^0.2.0",
         "@profullstack/synconfig": "^0.1.1",
         "@simplewebauthn/browser": "^13.3.0",
@@ -619,6 +620,27 @@
         "node": ">=20.11"
       }
     },
+    "node_modules/@profullstack/player": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/@profullstack/player/-/player-0.17.0.tgz",
+      "integrity": "sha512-rd1aQzXqBwMMp6aIuyJ7K3O3+k7W83J1AXl7TG9PZmAVeK85lxEsuE1DwUnUbaa6zwBhJ9Xfcb0YxHVqtncYGg==",
+      "license": "MIT",
+      "dependencies": {
+        "hls.js": "^1.7.1",
+        "mpegts.js": "^1.8.2"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "react": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@profullstack/redeem-credits": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@profullstack/redeem-credits/-/redeem-credits-0.2.0.tgz",
@@ -964,6 +986,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es6-promise": {
+      "version": "4.2.8",
+      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
+      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==",
+      "license": "MIT"
+    },
     "node_modules/escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
@@ -979,6 +1007,15 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.x"
+      }
+    },
     "node_modules/express": {
       "version": "4.22.2",
       "resolved": "https://registry.npmjs.org/express/-/express-4.22.2.tgz",
@@ -1178,6 +1215,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hls.js": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.7.4.tgz",
+      "integrity": "sha512-3GlxGdPvT2YHvQYOt+yOzT/DEior/qJVNIylHA77kgeoBTdQQqi70GwefNEUmHQeNGyjC8U62+bruqW/Tpm+tg==",
+      "license": "Apache-2.0"
+    },
     "node_modules/http-errors": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
@@ -1329,6 +1372,19 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/mpegts.js": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/mpegts.js/-/mpegts.js-1.8.2.tgz",
+      "integrity": "sha512-cZYMa5muASH55wrS6JK5IGkUqnCA96c0f+WdnW91jIK9s/N6NzjmTQDJNYg9A5u/G2Q5nj2b3w1Zwzze/9guxA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "es6-promise": "^4.2.8",
+        "events": "^3.3.0"
+      },
+      "engines": {
+        "node": ">=20.9.0"
+      }
+    },
     "node_modules/ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
diff --git a/apps/pwa/package.json b/apps/pwa/package.json
index 813047b1..5842afa5 100644
--- a/apps/pwa/package.json
+++ b/apps/pwa/package.json
@@ -20,6 +20,7 @@
     "@profullstack/footer": "latest",
     "@profullstack/libsql-pg": "^0.1.2",
     "@profullstack/notifications": "^0.1.0",
+    "@profullstack/player": "^0.17.0",
     "@profullstack/redeem-credits": "^0.2.0",
     "@profullstack/synconfig": "^0.1.1",
     "@simplewebauthn/browser": "^13.3.0",
diff --git a/apps/pwa/pnpm-lock.yaml b/apps/pwa/pnpm-lock.yaml
index fd85ea58..0a91e9d5 100644
--- a/apps/pwa/pnpm-lock.yaml
+++ b/apps/pwa/pnpm-lock.yaml
@@ -26,6 +26,9 @@ importers:
       '@profullstack/notifications':
         specifier: ^0.1.0
         version: 0.1.0
+      '@profullstack/player':
+        specifier: ^0.17.0
+        version: 0.17.0
       '@profullstack/redeem-credits':
         specifier: ^0.2.0
         version: 0.2.0
@@ -251,6 +254,15 @@ packages:
     resolution: {integrity: sha512-17jiBCRiZVDcIyWnWKYr5E2eVog/1iHgXaruGbmlw7j7Ob4zd6oOqGjh8BP8wm13iFwikczYObQwSrGadBdnGw==}
     engines: {node: '>=20.11'}
 
+  '@profullstack/player@0.17.0':
+    resolution: {integrity: sha512-rd1aQzXqBwMMp6aIuyJ7K3O3+k7W83J1AXl7TG9PZmAVeK85lxEsuE1DwUnUbaa6zwBhJ9Xfcb0YxHVqtncYGg==}
+    engines: {node: '>=20'}
+    peerDependencies:
+      react: '>=18'
+    peerDependenciesMeta:
+      react:
+        optional: true
+
   '@profullstack/redeem-credits@0.2.0':
     resolution: {integrity: sha512-JLowb7mWYfouIK7O522tuPPhvLjQjhdEfm6g3xEYrlNLGzLhrIADDhrYldBlGHfiVBWUFX7wefLuCSLF9fnyog==}
     engines: {node: '>=20'}
@@ -384,6 +396,9 @@ packages:
     resolution: {integrity: sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==}
     engines: {node: '>= 0.4'}
 
+  es6-promise@4.2.8:
+    resolution: {integrity: sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==}
+
   escape-html@1.0.3:
     resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
 
@@ -391,6 +406,10 @@ packages:
     resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
     engines: {node: '>= 0.6'}
 
+  events@3.3.0:
+    resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
+    engines: {node: '>=0.8.x'}
+
   express@4.22.2:
     resolution: {integrity: sha512-IuL+Elrou2ZvCFHs18/CIzy2Nzvo25nZ1/D2eIZlz7c+QUayAcYoiM2BthCjs+EBHVpjYjcuLDAiCWgeIX3X1Q==}
     engines: {node: '>= 0.10.0'}
@@ -438,6 +457,9 @@ packages:
     resolution: {integrity: sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==}
     engines: {node: '>= 0.4'}
 
+  hls.js@1.7.4:
+    resolution: {integrity: sha512-3GlxGdPvT2YHvQYOt+yOzT/DEior/qJVNIylHA77kgeoBTdQQqi70GwefNEUmHQeNGyjC8U62+bruqW/Tpm+tg==}
+
   http-errors@2.0.1:
     resolution: {integrity: sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==}
     engines: {node: '>= 0.8'}
@@ -494,6 +516,10 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
+  mpegts.js@1.8.2:
+    resolution: {integrity: sha512-cZYMa5muASH55wrS6JK5IGkUqnCA96c0f+WdnW91jIK9s/N6NzjmTQDJNYg9A5u/G2Q5nj2b3w1Zwzze/9guxA==}
+    engines: {node: '>=20.9.0'}
+
   ms@2.0.0:
     resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
 
@@ -935,6 +961,11 @@ snapshots:
 
   '@profullstack/notifications@0.1.0': {}
 
+  '@profullstack/player@0.17.0':
+    dependencies:
+      hls.js: 1.7.4
+      mpegts.js: 1.8.2
+
   '@profullstack/redeem-credits@0.2.0': {}
 
   '@profullstack/referrals@0.1.0': {}
@@ -1055,10 +1086,14 @@ snapshots:
     dependencies:
       es-errors: 1.3.0
 
+  es6-promise@4.2.8: {}
+
   escape-html@1.0.3: {}
 
   etag@1.8.1: {}
 
+  events@3.3.0: {}
+
   express@4.22.2:
     dependencies:
       accepts: 1.3.8
@@ -1148,6 +1183,8 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
+  hls.js@1.7.4: {}
+
   http-errors@2.0.1:
     dependencies:
       depd: 2.0.0
@@ -1211,6 +1248,11 @@ snapshots:
 
   mime@1.6.0: {}
 
+  mpegts.js@1.8.2:
+    dependencies:
+      es6-promise: 4.2.8
+      events: 3.3.0
+
   ms@2.0.0: {}
 
   ms@2.1.3: {}
diff --git a/apps/pwa/public/pf-player-init.js b/apps/pwa/public/pf-player-init.js
new file mode 100644
index 00000000..e777ec58
--- /dev/null
+++ b/apps/pwa/public/pf-player-init.js
@@ -0,0 +1,33 @@
+// Upgrades every server-rendered <div data-pf-player><video controls></video></div> to
+// @profullstack/player (one control bar, auto-hide, fullscreen including iPhone). The <video> keeps
+// its native controls until the player has loaded, and keeps them for good if it never does.
+const hosts = document.querySelectorAll("[data-pf-player]");
+if (hosts.length) {
+  if (!document.querySelector("link[data-pf-player-css]")) {
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = "/pf-player.css";
+    link.dataset.pfPlayerCss = "";
+    document.head.append(link);
+  }
+  import("/pf-player.js")
+    .then(({ createPlayer }) => {
+      for (const host of hosts) {
+        const media = host.querySelector("video, audio");
+        const src = host.dataset.src || media?.getAttribute("src");
+        if (!media || !src) continue;
+        try {
+          createPlayer(host, {
+            src,
+            media,
+            kind: host.dataset.kind || undefined,
+            mediaId: host.dataset.mediaId || undefined,
+            poster: media.getAttribute("poster") || undefined,
+          });
+        } catch (error) {
+          console.error("player failed, keeping native controls", error);
+        }
+      }
+    })
+    .catch((error) => console.error("player unavailable, keeping native controls", error));
+}
diff --git a/apps/pwa/src/client/player-entry.mjs b/apps/pwa/src/client/player-entry.mjs
new file mode 100644
index 00000000..f41671ee
--- /dev/null
+++ b/apps/pwa/src/client/player-entry.mjs
@@ -0,0 +1,3 @@
+// The browser side of @profullstack/player, bundled by the server (src/lib/player-bundle.mjs) and
+// loaded by public/pf-player-init.js only on a page that has something to play.
+export { createPlayer } from "@profullstack/player";
diff --git a/apps/pwa/src/lib/moshpit-site-page.mjs b/apps/pwa/src/lib/moshpit-site-page.mjs
index 4b656ea4..2be8ff8f 100644
--- a/apps/pwa/src/lib/moshpit-site-page.mjs
+++ b/apps/pwa/src/lib/moshpit-site-page.mjs
@@ -21,7 +21,7 @@ import { esc } from "./html.mjs";
 import { feedDate } from "./moshpit-feed-page.mjs";
 import { navFor, postsFor } from "./moshpit-content.mjs";
 
-/** A direct media file — something <video> can play without anyone's player. */
+/** A direct media file — something @profullstack/player (or a bare <video>) plays itself. */
 const VIDEO_FILE = /\.(mp4|webm|ogv|ogg|mov|m4v)(\?|#|$)/i;
 
 /**
@@ -115,6 +115,8 @@ export const SITE_CSS = `
   background:var(--surface)}
 .site-video{width:100%;aspect-ratio:16/9;border-radius:10px;border:1px solid var(--line);
   background:#000;margin-top:12px;display:block}
+.site-player{overflow:hidden}
+.site-player video{display:block;width:100%;height:100%;background:#000}
 .site-card{display:flex;gap:12px;align-items:center;margin-top:12px;padding:12px 14px;
   border:1px solid var(--line-2);border-radius:10px;background:var(--bg-tint)}
 .site-card .mono{font-size:.76rem;color:var(--dim);word-break:break-all}
@@ -159,7 +161,10 @@ function media(item) {
 
   if (item.kind === "video" && item.url) {
     if (VIDEO_FILE.test(item.url)) {
-      return `<video class="site-video" controls preload="none" src="${esc(item.url)}"></video>`;
+      // @profullstack/player takes over the <video> once /pf-player-init.js has
+      // loaded it; until then, or without JS, the native controls play it.
+      return `<div class="site-video site-player" data-pf-player data-src="${esc(item.url)}"><video controls playsinline preload="none" src="${esc(item.url)}"></video></div>
+<script type="module" src="/pf-player-init.js"></script>`;
     }
     const embed = videoEmbed(item.url);
     if (embed) {
diff --git a/apps/pwa/src/lib/player-bundle.mjs b/apps/pwa/src/lib/player-bundle.mjs
new file mode 100644
index 00000000..1f931cf3
--- /dev/null
+++ b/apps/pwa/src/lib/player-bundle.mjs
@@ -0,0 +1,39 @@
+/**
+ * @profullstack/player for the browser, served from app.moshcode.sh's own origin.
+ *
+ * The PWA has no client build step: public/ is plain JS. The player's dist imports hls.js and
+ * mpegts.js by bare name, so it cannot be served from node_modules as it stands; it is bundled
+ * here instead, once, the first time it is asked for, into one ES module (/pf-player.js) plus its
+ * stylesheet (/pf-player.css). public/pf-player-init.js imports it only on a page with a
+ * [data-pf-player] host. Same pattern as pit.world's src/player-bundle.ts. Needs Bun (the
+ * production runtime); under Node the route answers 503 and the native <video> stays.
+ */
+import { readFileSync } from "node:fs";
+import { createRequire } from "node:module";
+
+let js = null;
+let css = null;
+
+export function playerJs() {
+  js ??= (async () => {
+    if (typeof Bun === "undefined") throw new Error("player bundle needs the Bun runtime");
+    const out = await Bun.build({
+      entrypoints: [new URL("../client/player-entry.mjs", import.meta.url).pathname],
+      target: "browser",
+      format: "esm",
+      splitting: false,
+      minify: true,
+    });
+    if (!out.success) throw new Error(`player bundle failed: ${out.logs.map((l) => l.message).join("; ")}`);
+    return await out.outputs[0].text();
+  })().catch((error) => {
+    js = null;
+    throw error;
+  });
+  return js;
+}
+
+export function playerCss() {
+  css ??= readFileSync(createRequire(import.meta.url).resolve("@profullstack/player/player.css"), "utf8");
+  return css;
+}
diff --git a/apps/pwa/src/server.mjs b/apps/pwa/src/server.mjs
index be1ec6f4..c7267d67 100644
--- a/apps/pwa/src/server.mjs
+++ b/apps/pwa/src/server.mjs
@@ -26,6 +26,7 @@ import { MAX_BATCH, MAX_PUBLISH_BYTES } from "./lib/moshpit-content.mjs";
 import { endExpiredLeases, expireOffers } from "./moshpit.mjs";
 import { startRingFooterRefresh, RING_FOOTER_OPTIONS } from "./lib/ring-footer.mjs";
 import { descriptor } from "@profullstack/footer";
+import { playerCss, playerJs } from "./lib/player-bundle.mjs";
 
 const app = express();
 app.disable("x-powered-by");
@@ -68,6 +69,18 @@ const vendor = {
 for (const [route, file] of Object.entries(vendor)) {
   app.get(route, (_req, res) => res.sendFile(path.join(config.root, file), { maxAge: "1h" }));
 }
+// @profullstack/player, bundled once on first use (lib/player-bundle.mjs); public/pf-player-init.js
+// loads it only on a page with a video file on it (a name's published site).
+app.get("/pf-player.js", async (_req, res) => {
+  try {
+    res.set("cache-control", "public, max-age=3600").type("text/javascript").send(await playerJs());
+  } catch (error) {
+    console.error(error instanceof Error ? error.message : String(error));
+    res.status(503).type("text/plain").send("player unavailable");
+  }
+});
+app.get("/pf-player.css", (_req, res) =>
+  res.set("cache-control", "public, max-age=3600").type("text/css").send(playerCss()));
 
 app.get("/healthz", (_req, res) => res.json({ ok: true, env: config.env }));
 // The Profullstack webring descriptor (the ring footer is on the sign-in page).
diff --git a/apps/pwa/test/moshpit-site-page.test.mjs b/apps/pwa/test/moshpit-site-page.test.mjs
index 4687e132..91aba667 100644
--- a/apps/pwa/test/moshpit-site-page.test.mjs
+++ b/apps/pwa/test/moshpit-site-page.test.mjs
@@ -199,7 +199,9 @@ test("site: every post type renders as itself", skip, async () => {
   assert.match(html, /class="site-out" href="https:\/\/example\.com\/thing"[^>]*>→ example\.com/);
   assert.match(html, /<img class="site-shot" src="https:\/\/cdn\.example\/p\.jpg"/);
   assert.match(html, /class="site-gallery"/);
-  assert.match(html, /<video class="site-video" controls preload="none" src="https:\/\/cdn\.example\/clip\.mp4">/);
+  // A direct file goes to @profullstack/player, with the bare <video> as the fallback.
+  assert.match(html, /<div class="site-video site-player" data-pf-player data-src="https:\/\/cdn\.example\/clip\.mp4"><video controls playsinline preload="none" src="https:\/\/cdn\.example\/clip\.mp4"><\/video><\/div>/);
+  assert.match(html, /<script type="module" src="\/pf-player-init\.js"><\/script>/);
   assert.match(html, /youtube-nocookie\.com\/embed\/dQw4w9WgXcQ/);
   // An embed is a card, not a frame — an arbitrary URL does not get an iframe
   // on the origin where accounts live.