My video file is not recognized by next.js done with typescript

Issue

I ran into a problem in my project which is done in next.js, typescript, tailwindcss. I am making my Masthead for the website and I want the background to be a video. For some reason, the video is not being recognized, I tried putting it into different directories, importing import Background "./material-bg.mp4" and even converting the file from mp4 to webm because originally it was an mp4 file. I tried if only this specific video is not being recognized, which is true when I used a jpg, but not if it was a video. I think there is a problem recognizing videos themselves because it didn’t recognize other videos as well. Thank you so much in advance!

<video autoPlay loop muted playsInline className='absolute w-full h-full object-cover'>
            <source src="./material-bg.webm" type='video/webm; codecs=vp9'/>
        </video>

Solution

From next.js docs:

Next.js can serve static files, like images, under a folder called public in the root directory. Files inside public can then be referenced by your code starting from the base URL (/).

So, create a folder named as public in the root directory of your project, put your static files inside this folder, in your case the video file, so just keep the src path as it is and it should work now.

Answered By – Yago Biermann

Answer Checked By – Willingham (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.