Video does not appear when I build the project

Question

I created a site using Reactjs, and in the initial part I put a background video and a text in front, when I open the site Reactjs in my machine the video appears normally without any problem, when I deploy the site to Heroku, Everything is working normally except the video that does not appear. Both the video and the images on the site are in the same directory, and only the video that does not appear.

Because when I build my project, the video does not appear on my machine.

npm run build
npm install -g serve
serve -s build

Sample images:

The video is this background apple logo, in the machine mihna appears like this

When I deploy in Heroku is like this, without the video

Part of the code where it is implemented

EDIT: I found that the error was in the video id, for some reason the id field was not working, so I switched to classname and it worked normally.

EDIT2: And also that the opacity field in css was in percentage, the browsers support this, but when it goes through the compiler it doesn’t work right, so I switched to decimal.

Answer 1

Static media files should be imported as if they were Javascript files. For example, the following works in the production build:

// nos imports:
import videoFile from '../assets/video.mp4'

// no seu componente:
<video controls muted loop>
    <source src={videoFile} type="video/mp4" />
    Desculpe... seu navegador não suporta vídeos.
</video>

See more in https://create-react-app.dev/docs/adding-images-fonts-and-files/

EDIT:

Your video is actually showing, but with 1% opacity. Strangely, the compiler is changing the original value. See this answer for a solution. Change opacity: 40%; for opacity: 0.4;.

https://stackoverflow.com/questions/58853844/the-opacity-value-was-changed-to-1-after-building-the-reacjs-project