React local video does not load in production

Question

I am trying to loop a very simple video contained in src/Assets/videos.

When I deploy a local server with npm start, the video performs as expected, however, when I publish to production the video does not load. I am using AWS Amplify CLI to publish the app.

I tried to:
1). View the app in a different browser (Firefox and Chrome).
2). Load the video from /public via an environment variable.
3). Load the video via the react-player module.

My initial code was home.js component rendered in app.js:

import heroVideo from '../../Assets/videos/heroVid.mp4';
//...
     export default function HomePage() {
     return (
         <div id="hero" align="center" className="center">
            <div>
                 <video muted autostart autoPlay loop >
                     <source src={heroVideo} type="video/mp4"/>
                     Your browser does not support the video tag.
                 </video>
            </div>
            <div style={{width: '90%'}}>
                <div>
                    <img src={logo} style={{height: '200px', borderRadius: '100px'}} className={classes.blue} alt={`${props.brandName} Logo`}/>
                    <h4>A QC HOME BUYERS COMPANY</h4>
                    <h1>QC General Contractors</h1>
                    <h2 className="script">Let's build your future together</h2>
                    <NavLink to="/request-quote" className="simple-link"><Button variant="contained" color="secondary">Request a quote</Button></NavLink>
                </div>
            </div>
        </div>
    )
}

Then I tried to load from /public:

 export default function HomePage() {
 return (
     <div id="hero" align="center" className="center">
        <div>
             <video src={process.env.PUBLIC_URL + 'Videos/heroVid.mp4} muted autostart autoPlay loop />
        </div>
        <div style={{width: '90%'}}>
            <div>
                <img src={logo} style={{height: '200px', borderRadius: '100px'}} className={classes.blue} alt={`${props.brandName} Logo`}/>
                <h4>A QC HOME BUYERS COMPANY</h4>
                <h1>QC General Contractors</h1>
                <h2 className="script">Let's build your future together</h2>
                <NavLink to="/request-quote" className="simple-link"><Button variant="contained" color="secondary">Request a quote</Button></NavLink>
            </div>
        </div>
     </div>
    )
}

Finally react-player:

import heroVideo from '../../Assets/videos/heroVid.mp4';
import ReactPlayer from 'react-player'
//...
 export default function HomePage() {
 return (
     <div id="hero" align="center" className="center">
        <div>
             <ReactPlayer url={heroVideo} loop="true" volume="0" muted="true" playing="true" style={{height: "100%"}} />
        </div>
        <div style={{width: '90%'}}>
            <div>
                <img src={logo} style={{height: '200px', borderRadius: '100px'}} className={classes.blue} alt={`${props.brandName} Logo`}/>
                <h4>A QC HOME BUYERS COMPANY</h4>
                <h1>QC General Contractors</h1>
                <h2 className="script">Let's build your future together</h2>
                <NavLink to="/request-quote" className="simple-link"><Button variant="contained" color="secondary">Request a quote</Button></NavLink>
            </div>
        </div>
    </div>
   )
}

I am still relatively new to react and AWS Amplify - Is there something I am missing? Thanks in advance for any guidance.

Answer 1

Did @jsc31994 recommendation :

Uploaded the video on a S3 bucket and then used ReactPlayer

      <ReactPlayer
        url='https://xxx.s3.us-east-2.amazonaws.com/xxx-background.mp4'
        playing={true}
        loop={true}
        muted={true}
        controls={false}
        id="background_video"
      />

Answer 2

I was having the same issue as well, the easiest solution I found was to create an S3 bucket on AWS and upload the video file there and grab the src from said video. You're also gonna have to add public read access for your bucket/object.

Answer 3

Have you modified your rewrite rules to add mp4 ?

</^[^.]+$|\.(?!(css|mp4|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>