diff --git a/src/components/Post/Embed/VideoEmbed/index.tsx b/src/components/Post/Embed/VideoEmbed/index.tsx
index c66d1a2185..2212be83d3 100644
--- a/src/components/Post/Embed/VideoEmbed/index.tsx
+++ b/src/components/Post/Embed/VideoEmbed/index.tsx
@@ -71,7 +71,10 @@ export function VideoEmbed({embed, crop}: Props) {
) : (
+ aspectRatio={constrained || 1}
+ // slightly smaller max height than images
+ // images use 16 / 9, for reference
+ minMobileAspectRatio={14 / 9}>
{contents}
)}
diff --git a/src/components/Post/Embed/VideoEmbed/index.web.tsx b/src/components/Post/Embed/VideoEmbed/index.web.tsx
index e988bc8301..8965e8b90e 100644
--- a/src/components/Post/Embed/VideoEmbed/index.web.tsx
+++ b/src/components/Post/Embed/VideoEmbed/index.web.tsx
@@ -14,7 +14,7 @@ import {useLingui} from '@lingui/react'
import {isFirefox} from '#/lib/browser'
import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
import {ConstrainedImage} from '#/view/com/util/images/AutoSizedImage'
-import {atoms as a} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
import {useIsWithinMessage} from '#/components/dms/MessageContext'
import {useFullscreen} from '#/components/hooks/useFullscreen'
import {
@@ -32,6 +32,7 @@ export function VideoEmbed({
embed: AppBskyEmbedVideo.View
crop?: 'none' | 'square' | 'constrained'
}) {
+ const t = useTheme()
const ref = useRef(null)
const {active, setActive, sendPosition, currentActiveView} =
useActiveVideoWeb()
@@ -114,13 +115,24 @@ export function VideoEmbed({
sendPosition={sendPosition}
isAnyViewActive={currentActiveView !== null}>
{cropDisabled ? (
-
+
{contents}
) : (
+ aspectRatio={constrained || 1}
+ // slightly smaller max height than images
+ // images use 16 / 9, for reference
+ minMobileAspectRatio={14 / 9}>
{contents}
)}
diff --git a/src/components/Post/Embed/index.tsx b/src/components/Post/Embed/index.tsx
index 8566c2fe6f..3efd231367 100644
--- a/src/components/Post/Embed/index.tsx
+++ b/src/components/Post/Embed/index.tsx
@@ -112,7 +112,7 @@ function MediaEmbed({
-
+
)
}
diff --git a/src/view/com/util/images/AutoSizedImage.tsx b/src/view/com/util/images/AutoSizedImage.tsx
index 4e9c61d474..e16ab02593 100644
--- a/src/view/com/util/images/AutoSizedImage.tsx
+++ b/src/view/com/util/images/AutoSizedImage.tsx
@@ -21,9 +21,11 @@ export function ConstrainedImage({
aspectRatio,
fullBleed,
children,
+ minMobileAspectRatio,
}: {
aspectRatio: number
fullBleed?: boolean
+ minMobileAspectRatio?: number
children: React.ReactNode
}) {
const t = useTheme()
@@ -35,10 +37,10 @@ export function ConstrainedImage({
const outerAspectRatio = React.useMemo(() => {
const ratio =
isNative || !gtMobile
- ? Math.min(1 / aspectRatio, 16 / 9) // 9:16 bounding box
+ ? Math.min(1 / aspectRatio, minMobileAspectRatio ?? 16 / 9) // 9:16 bounding box
: Math.min(1 / aspectRatio, 1) // 1:1 bounding box
return `${ratio * 100}%`
- }, [aspectRatio, gtMobile])
+ }, [aspectRatio, gtMobile, minMobileAspectRatio])
return (