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;
}
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}`,
}
}
}