Search code examples
videonext.jsvercel

How do you render videos, after deployment to Vercel? "Unable to Play Media"

I am trying to use a video as my webpage background on a next.js 13 / react app

& I am getting back "unable to play media" on the webpage, and within the Vercel Source Output.

My video works great in a local environment, I did have to use Github LFS not sure if that may be why?

I am serving the video from 'public' folder, it is a 200 mb+ mp4.

[Live]

Local```

Expected the video to render and be full screen..

My video code

 <div className="z-10">
            <div className="overlay"></div>
            <video id="videoBG" className="" autoPlay loop >
            <source src="Water.mp4" type="video/mp4"/>
            </video>
        </div>
Solution

  • I figured it out, for anyone else who runs into this issue. Vercel doesn't work with github lfs! I ended up hosting the video via a 3rd party (I used cloudflare) and imported it via url.

    UPDATE

    ** Cloudflare stream doesn't allow inline css alterations, so was unable to efficiently set it as a background video, as to it was stuck to a set aspect size, and refused to cover entire viewport at certain screen sizes.

    I fixed this by using Vimeo Video hosting instead, though had to get a standard account. Vimeo worked fantastic for this use case.