Search code examples
javascriptreactjsvideopathsrc

What is the problem with this video src path inside a component? [REACT]

I have the following structure in my src folder. I am triying to use the video from assets/video/blockchain.mp4 in the VideoBackground.js component (inside components/VideoBackground). But it doesn't display anything.

enter image description here

For that purpose I am using this variable to store the path:

 const videoSource = "../../assets/video/blockchain.mp4";

And then I am using that variable in the source tag here:

<video autoPlay="autoplay" loop="loop" muted>
        <source src={videoSource} type="video/mp4" />
</video>

If I edit videoSource variable in order to add a new url to the same video but in a external server it works. But I am not able to do it with the video stored ino my project.

Thank you very much for your time.

Solution

  • I just discovered the solution:

    You have to import the video as this:

    import videoSource from "./your-path-to-the-video";

    And then you can use the videoSource value in the source tag of the video as I did in the first post and it works.