fix some youtube videos not properly loading (#2726)

* add player iframe to bskyweb

* iframe for youtube content

* update tests

* ts error

2 files changed, 14 insertions, 7 deletions

diff --git a/src/lib/strings/embed-player.ts b/src/lib/strings/embed-player.ts
index 3270b6f07..21a575b91 100644
--- a/src/lib/strings/embed-player.ts
+++ b/src/lib/strings/embed-player.ts
@@ -1,4 +1,5 @@
-import {Dimensions, Platform} from 'react-native'
+import {Dimensions} from 'react-native'
+import {isWeb} from 'platform/detection'
 const {height: SCREEN_HEIGHT} = Dimensions.get('window')
 
 export const embedPlayerSources = [
@@ -73,7 +74,7 @@ export function parseEmbedPlayerFromUrl(
       return {
         type: 'youtube_video',
         source: 'youtube',
-        playerUri: `https://www.youtube.com/embed/${videoId}?autoplay=1&playsinline=1&start=${seek}`,
+        playerUri: `https://bsky.app/iframe/youtube.html?videoId=${videoId}&start=${seek}`,
       }
     }
   }
@@ -92,7 +93,7 @@ export function parseEmbedPlayerFromUrl(
         type: page === 'shorts' ? 'youtube_short' : 'youtube_video',
         source: page === 'shorts' ? 'youtubeShorts' : 'youtube',
         hideDetails: page === 'shorts' ? true : undefined,
-        playerUri: `https://www.youtube.com/embed/${videoId}?autoplay=1&playsinline=1&start=${seek}`,
+        playerUri: `https://bsky.app/iframe/youtube.html?videoId=${videoId}&start=${seek}`,
       }
     }
   }
@@ -103,8 +104,10 @@ export function parseEmbedPlayerFromUrl(
     urlp.hostname === 'www.twitch.tv' ||
     urlp.hostname === 'm.twitch.tv'
   ) {
-    const parent =
-      Platform.OS === 'web' ? window.location.hostname : 'localhost'
+    const parent = isWeb
+      ? // @ts-ignore only for web
+        window.location.hostname
+      : 'localhost'
 
     const [_, channelOrVideo, clipOrId, id] = urlp.pathname.split('/')
 
diff --git a/src/view/com/util/post-embeds/ExternalPlayerEmbed.tsx b/src/view/com/util/post-embeds/ExternalPlayerEmbed.tsx
index 8b0858b69..d556e7669 100644
--- a/src/view/com/util/post-embeds/ExternalPlayerEmbed.tsx
+++ b/src/view/com/util/post-embeds/ExternalPlayerEmbed.tsx
@@ -78,9 +78,13 @@ function Player({
   onLoad: () => void
 }) {
   // ensures we only load what's requested
+  // when it's a youtube video, we need to allow both bsky.app and youtube.com
   const onShouldStartLoadWithRequest = React.useCallback(
-    (event: ShouldStartLoadRequest) => event.url === params.playerUri,
-    [params.playerUri],
+    (event: ShouldStartLoadRequest) =>
+      event.url === params.playerUri ||
+      (params.source.startsWith('youtube') &&
+        event.url.includes('www.youtube.com')),
+    [params.playerUri, params.source],
   )
 
   // Don't show the player until it is active