fix youtube embeds

flo-bit · flo-bit · commit b9afe7917e1c · 2026-06-01T15:09:24.000+02:00
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -30,6 +30,9 @@ export default defineConfig(
       '.husky/**',
       'patches/**',
       '*.html',
+      // Eurosky fork: static iframe player scripts (browser globals like YT /
+      // onYouTubeIframeAPIReady, not app code). Mirrors the bskyweb/** ignore.
+      'web/iframe/**',
       'bskyweb/**',
       'bskyembed/**',
       'bskyogcard/**',
diff --git a/src/lib/strings/embed-player.ts b/src/lib/strings/embed-player.ts
@@ -5,10 +5,11 @@ import {IS_WEB} from '#/env'
 const {height: SCREEN_HEIGHT} = Dimensions.get('window')
 
 const IFRAME_HOST = IS_WEB
-  ? // @ts-ignore only for web
-    window.location.host === 'localhost:8100'
-    ? 'http://localhost:8100'
-    : 'https://bsky.app'
+  ? // @ts-ignore only for web -- Eurosky fork: serve the YouTube iframe player
+    // from our own origin instead of bsky.app. bsky.app/iframe/* sends
+    // X-Frame-Options: SAMEORIGIN, so it refuses to be framed cross-origin. The
+    // player files live in web/iframe/* and are copied to the web build root.
+    window.location.origin
   : __DEV__ && !process.env.JEST_WORKER_ID
     ? 'http://localhost:8100'
     : 'https://bsky.app'
diff --git a/web/iframe/youtube.html b/web/iframe/youtube.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html><meta name="viewport" content="width=device-width, initial-scale=1" />
+<style>
+    body {
+        margin: 0;
+    }
+    .container {
+        position: relative;
+        overflow: hidden;
+        width: 100vw;
+        height: 100vh;
+    }
+    .video {
+        position: absolute;
+        width: 100vw;
+        height: 100vh;
+    }
+</style>
+<div class="container"><div class="video" id="player"></div></div>
+<script src="youtube.js"></script>
diff --git a/web/iframe/youtube.js b/web/iframe/youtube.js
@@ -0,0 +1,35 @@
+const url = new URL(window.location)
+const viewport = document.querySelector('meta[name=viewport]')
+
+const tag = document.createElement('script')
+tag.src = 'https://www.youtube.com/iframe_api'
+const firstScriptTag = document.getElementsByTagName('script')[0]
+firstScriptTag.parentNode.insertBefore(tag, firstScriptTag)
+
+let player
+function onYouTubeIframeAPIReady() {
+  let videoId = url.searchParams.get('videoId')
+  videoId = decodeURIComponent(videoId)
+  videoId = videoId.replace(/[^a-zA-Z0-9_-]/g, '')
+  if (videoId.length !== 11) throw new Error('Invalid video ID')
+
+  let start = url.searchParams.get('start')
+  start = start.replace(/[^0-9]/g, '')
+
+  player = new YT.Player('player', {
+    width: '1000',
+    height: '1000',
+    videoId,
+    playerVars: {
+      autoplay: 1,
+      start,
+      rel: 0,
+      loop: 0,
+      playsinline: 1,
+      origin: url.origin,
+    },
+  })
+}
+function onPlayerReady(event) {
+  event.target.playVideo()
+}
