fix(video): use object-fit contain to prevent horizontal cropping

nomadbitcoin · nomadbitcoin · commit 278cc0f2fc81 · 2026-02-18T21:27:02.000+13:00
diff --git a/src/components/FeaturesSection.tsx b/src/components/FeaturesSection.tsx
@@ -128,7 +128,7 @@ const CommunityCard = ({ config, index }: { config: CardConfig; index: number })
               playsInline
               preload="auto"
               ref={(el) => { if (el) { el.muted = true; el.play().catch(() => {}); } }}
-              style={{ objectFit: "cover", width: "100%", height: "100%" }}
+              style={{ objectFit: "contain", width: "100%", height: "100%" }}
             >
               <source src={config.media.mp4} type="video/mp4" />
               <source src={config.media.webm} type="video/webm" />
diff --git a/src/components/HeroSection.tsx b/src/components/HeroSection.tsx
@@ -66,7 +66,7 @@ const HeroSection = () => {
               playsInline
               preload="auto"
               ref={(el) => { if (el) { el.muted = true; el.play().catch(() => {}); } }}
-              style={{ objectFit: 'cover', width: '100%', height: '100%' }}
+              style={{ objectFit: 'contain', width: '100%', height: '100%' }}
             >
               <source src={homepageMp4} type="video/mp4" />
               <source src={homepageWebm} type="video/webm" />

Original file line number	Diff line number	Diff line change
`@@ -128,7 +128,7 @@ const CommunityCard = ({ config, index }: { config: CardConfig; index: number })`
`128`	`128`	`playsInline`
`129`	`129`	`preload="auto"`
`130`	`130`	`ref={(el) => { if (el) { el.muted = true; el.play().catch(() => {}); } }}`
`131`		`- style={{ objectFit: "cover", width: "100%", height: "100%" }}`
	`131`	`+ style={{ objectFit: "contain", width: "100%", height: "100%" }}`
`132`	`132`	`>`
`133`	`133`	`<source src={config.media.mp4} type="video/mp4" />`
`134`	`134`	`<source src={config.media.webm} type="video/webm" />`
Original file line number	Diff line number	Diff line change
`@@ -66,7 +66,7 @@ const HeroSection = () => {`
`66`	`66`	`playsInline`
`67`	`67`	`preload="auto"`
`68`	`68`	`ref={(el) => { if (el) { el.muted = true; el.play().catch(() => {}); } }}`
`69`		`- style={{ objectFit: 'cover', width: '100%', height: '100%' }}`
	`69`	`+ style={{ objectFit: 'contain', width: '100%', height: '100%' }}`
`70`	`70`	`>`
`71`	`71`	`<source src={homepageMp4} type="video/mp4" />`
`72`	`72`	`<source src={homepageWebm} type="video/webm" />`