Fix video embed sizing in fan club post cards (#14226)

dylanjeffers · claude · web-flow · commit 1259682694da · 2026-05-04T16:09:50.000-07:00
## Summary - Fix video embed not filling its 16:9 container in fan club post cards on mobile - The embedded HTML inside the `WebView` set `iframe { height: 100% }` but neither `<html>` nor `<body>` had an explicit height, so the iframe collapsed and left a visible gap inside the card - Add `html, body { width: 100%; height: 100% }` (plus `display: block` and `border: 0` on the iframe) so the iframe actually fills the WebView - Apply the same fix to the shared `VideoEmbed` component, which has identical embed HTML ## Test plan - [ ] Open a fan club detail screen (mobile) and view a post containing a YouTube video — the player should fill the rounded 16:9 card with no whitespace below it - [ ] Verify a Vimeo URL renders the same way - [ ] Verify the locked-post placeholder (lock icon over a 331:170 box) is unchanged - [ ] Verify any other usages of `VideoEmbed` still render correctly https://claude.ai/code/session_01MWtULVCQ8fcSSUnBr7gwfR --- _Generated by [Claude Code](https://claude.ai/code/session_01MWtULVCQ8fcSSUnBr7gwfR)_ --------- Co-authored-by: Claude <noreply@anthropic.com>
diff --git a/.changeset/fix-fan-club-video-sizing.md b/.changeset/fix-fan-club-video-sizing.md
@@ -0,0 +1,5 @@
+---
+'@audius/mobile': patch
+---
+
+Fix video embed sizing in fan club post cards. The WebView's embedded HTML set `iframe { height: 100% }` but neither `<html>` nor `<body>` had an explicit height, so the iframe collapsed and left a visible gap inside the 16:9 container. Giving `html, body` an explicit `100%` height lets the iframe fill the card as intended.
diff --git a/packages/mobile/src/components/video-embed/VideoEmbed.tsx b/packages/mobile/src/components/video-embed/VideoEmbed.tsx
@@ -35,7 +35,7 @@ export const VideoEmbed = ({ url }: VideoEmbedProps) => {
     >
       <WebView
         source={{
-          html: `<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width,initial-scale=1"><style>*{margin:0;padding:0}iframe{width:100%;height:100%;border:none}</style></head><body><iframe src="${embedUrl}" allow="accelerometer;autoplay;clipboard-write;encrypted-media;gyroscope;picture-in-picture" allowfullscreen></iframe></body></html>`,
+          html: `<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width,initial-scale=1"><style>*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:transparent}iframe{width:100%;height:100%;border:0;display:block}</style></head><body><iframe src="${embedUrl}" allow="accelerometer;autoplay;clipboard-write;encrypted-media;gyroscope;picture-in-picture" allowfullscreen></iframe></body></html>`,
           baseUrl: 'https://audius.co'
         }}
         style={{ flex: 1, backgroundColor: 'transparent' }}
diff --git a/packages/mobile/src/screens/coin-details-screen/components/TextPostCard.tsx b/packages/mobile/src/screens/coin-details-screen/components/TextPostCard.tsx
@@ -172,7 +172,7 @@ export const TextPostCard = ({ commentId, mint }: TextPostCardProps) => {
             >
               <WebView
                 source={{
-                  html: `<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width,initial-scale=1"><style>*{margin:0;padding:0}iframe{width:100%;height:100%;border:none}</style></head><body><iframe src="${videoEmbedUrl}" allow="accelerometer;autoplay;clipboard-write;encrypted-media;gyroscope;picture-in-picture" allowfullscreen></iframe></body></html>`,
+                  html: `<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width,initial-scale=1"><style>*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:transparent}iframe{width:100%;height:100%;border:0;display:block}</style></head><body><iframe src="${videoEmbedUrl}" allow="accelerometer;autoplay;clipboard-write;encrypted-media;gyroscope;picture-in-picture" allowfullscreen></iframe></body></html>`,
                   baseUrl: 'https://audius.co'
                 }}
                 style={{ flex: 1 }}

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@audius/mobile': patch
 +---
++
 +Fix video embed sizing in fan club post cards. The WebView's embedded HTML set `iframe { height: 100% }` but neither `<html>` nor `<body>` had an explicit height, so the iframe collapsed and left a visible gap inside the 16:9 container. Giving `html, body` an explicit `100%` height lets the iframe fill the card as intended.
Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,7 @@ export const VideoEmbed = ({ url }: VideoEmbedProps) => {`
`35`	`35`	`>`
`36`	`36`	`<WebView`
`37`	`37`	`source={{`
`38`		- html: `<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width,initial-scale=1"><style>*{margin:0;padding:0}iframe{width:100%;height:100%;border:none}</style></head><body><iframe src="${embedUrl}" allow="accelerometer;autoplay;clipboard-write;encrypted-media;gyroscope;picture-in-picture" allowfullscreen></iframe></body></html>`,
	`38`	+ html: `<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width,initial-scale=1"><style>*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:transparent}iframe{width:100%;height:100%;border:0;display:block}</style></head><body><iframe src="${embedUrl}" allow="accelerometer;autoplay;clipboard-write;encrypted-media;gyroscope;picture-in-picture" allowfullscreen></iframe></body></html>`,
`39`	`39`	`baseUrl: 'https://audius.co'`
`40`	`40`	`}}`
`41`	`41`	`style={{ flex: 1, backgroundColor: 'transparent' }}`
Original file line number	Diff line number	Diff line change
`@@ -172,7 +172,7 @@ export const TextPostCard = ({ commentId, mint }: TextPostCardProps) => {`
`172`	`172`	`>`
`173`	`173`	`<WebView`
`174`	`174`	`source={{`
`175`		- html: `<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width,initial-scale=1"><style>*{margin:0;padding:0}iframe{width:100%;height:100%;border:none}</style></head><body><iframe src="${videoEmbedUrl}" allow="accelerometer;autoplay;clipboard-write;encrypted-media;gyroscope;picture-in-picture" allowfullscreen></iframe></body></html>`,
	`175`	+ html: `<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width,initial-scale=1"><style>*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:transparent}iframe{width:100%;height:100%;border:0;display:block}</style></head><body><iframe src="${videoEmbedUrl}" allow="accelerometer;autoplay;clipboard-write;encrypted-media;gyroscope;picture-in-picture" allowfullscreen></iframe></body></html>`,
`176`	`176`	`baseUrl: 'https://audius.co'`
`177`	`177`	`}}`
`178`	`178`	`style={{ flex: 1 }}`