Vertical orientation background video example

[henrybabbage]

Hello,

Is there an example using the BackgroundVideo component in vertical / portrait orientation by any chance?

I'm struggling to get the component to fill the viewport in both the height and width axis. Are there any assumptions about how the video should be displayed as it relates to the css that is automatically added to the player?

Many thanks :)

This is some of my code:

// layout.tsx

import Header from '@/components/pages/sign-up/Header'
import BackgroundVideoContainer from '@/components/shared/media/BackgroundVideoContainer'
import assetDesktop from '@/videos/tamarillos_desktop.mp4'
import assetMobile from '@/videos/tamarillos_mobile.mp4'

export default function Layout({ children }: { children: React.ReactNode }) {
	return (
		<div className="h-screen w-full object-cover overflow-hidden p-0 m-0">
			<BackgroundVideoContainer assetMobile={assetMobile} assetDesktop={assetDesktop} />
			<section className="max-w-screen h-screen max-h-screen w-screen overflow-hidden p-4">
				<Header />
				{children}
			</section>
		</div>
	)
}

// BackgroundVideoContainer.tsx

'use client'

import { type Asset } from 'next-video/dist/assets.js'
import { useEffect, useState } from 'react'
import { useMediaQuery } from 'usehooks-ts'

import BackgroundVideoPlayer from './BackgroundVideoPlayer'

export default function BackgroundVideoContainer({
	assetMobile,
	assetDesktop,
}: {
	assetMobile: Asset | undefined
	assetDesktop: Asset | undefined
}) {
	const [asset, setAsset] = useState<Asset | undefined>(undefined)

	// matches is true if viewport matches desktop breakpoint
	const isMobile = useMediaQuery('(max-width: 768px)', {
		defaultValue: false,
		initializeWithValue: false,
	})

	useEffect(() => {
		isMobile ? setAsset(assetMobile) : setAsset(assetDesktop)
	}, [assetDesktop, assetMobile, isMobile])

	return isMobile ? <BackgroundVideoPlayer asset={assetMobile} /> : <BackgroundVideoPlayer asset={assetDesktop} />
}

// BackgroundVideoPlayer.tsx

import type { PlayerProps } from 'next-video'
import BackgroundVideo from 'next-video/background-video'

export default function BackgroundVideoPlayer(props: PlayerProps, children: React.ReactNode) {
	const { asset, poster, blurDataURL, thumbnailTime, ...rest } = props ?? {}
	return (
		<div className="fixed inset-0 w-full h-screen overflow-hidden -z-10">
			<BackgroundVideo
				src={asset}
				autoPlay
				loop
				className="absolute inset-0 w-full h-full object-cover -z-10"
			/>
		</div>
	)
}

My results:

[luwes]

related #131

Hi, you can normally accomplish this with setting a fixed aspect ratio on the video component.

See this example:
https://github.com/muxinc/next-video/blob/main/examples/default-provider/app/(default)/background-video/page.tsx#L17-L17

Video assets are very often 16/9 in landscape and 9/16 in portrait. You'll have to adjust this to fit your video dimensions.