I am adding a video as a background inside of the banner.

I am using next.js and usually with images I would just import them and then pass this import as src (e.g. import img from '@images/about-us-page/img.svg').

Currently when I try doing the same with mp4 video its not displaying the file inside of the files available to be imported. When I use require instead it complains that webpack needs to be configured.

What is the most performence efficent way to import videos? Would that be creating videos dir in public and then just referencing in?

Would reference public for images also be a better solution than importing images?

regards