From 88ab83bd52a76fb08a51970831f5ff1e86edd326 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Mon, 18 Mar 2024 09:09:08 -0700
Subject: [PATCH] Properly fill container for YT Shorts videos (#3238)

account for jest

account for jest

yt iframe fill container
---
 bskyweb/static/iframe/youtube.html | 12 +++++-------
 src/lib/strings/embed-player.ts    | 13 +++++++++++--
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/bskyweb/static/iframe/youtube.html b/bskyweb/static/iframe/youtube.html
index f2ada2ec..4b74d6fc 100644
--- a/bskyweb/static/iframe/youtube.html
+++ b/bskyweb/static/iframe/youtube.html
@@ -5,16 +5,14 @@
     }
     .container {
         position: relative;
-        width: 100%;
-        height: 0;
-        padding-bottom: 56.25%;
+        overflow: hidden;
+        width: 100vw;
+        height: 100vh;
     }
     .video {
         position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
+        width: 100vw;
+        height: 100vh;
     }
 </style>
 <div class="container"><div class="video" id="player"></div></div>
diff --git a/src/lib/strings/embed-player.ts b/src/lib/strings/embed-player.ts
index 1cf3b129..ee732847 100644
--- a/src/lib/strings/embed-player.ts
+++ b/src/lib/strings/embed-player.ts
@@ -2,6 +2,15 @@ import {Dimensions} from 'react-native'
 import {isWeb} from 'platform/detection'
 const {height: SCREEN_HEIGHT} = Dimensions.get('window')
 
+const IFRAME_HOST = isWeb
+  ? // @ts-ignore only for web
+    window.location.host === 'localhost:8100'
+    ? 'http://localhost:8100'
+    : 'https://bsky.app'
+  : __DEV__ && !process.env.JEST_WORKER_ID
+  ? 'http://localhost:8100'
+  : 'https://bsky.app'
+
 export const embedPlayerSources = [
   'youtube',
   'youtubeShorts',
@@ -74,7 +83,7 @@ export function parseEmbedPlayerFromUrl(
       return {
         type: 'youtube_video',
         source: 'youtube',
-        playerUri: `https://bsky.app/iframe/youtube.html?videoId=${videoId}&start=${seek}`,
+        playerUri: `${IFRAME_HOST}/iframe/youtube.html?videoId=${videoId}&start=${seek}`,
       }
     }
   }
@@ -93,7 +102,7 @@ export function parseEmbedPlayerFromUrl(
         type: page === 'shorts' ? 'youtube_short' : 'youtube_video',
         source: page === 'shorts' ? 'youtubeShorts' : 'youtube',
         hideDetails: page === 'shorts' ? true : undefined,
-        playerUri: `https://bsky.app/iframe/youtube.html?videoId=${videoId}&start=${seek}`,
+        playerUri: `${IFRAME_HOST}/iframe/youtube.html?videoId=${videoId}&start=${seek}`,
       }
     }
   }