Problem with React hero component with video bg

[MrcoSchrnr]

Please describe which feature you have a question about? Deployment of a React Web App with a video background.

I got a problem with my react web app that got in a hero component a video background. When I start the react app localy in localhost the video is shown as a background of the hero but when I deploy the repo to Amplify it won't work anymore. Please help me with that.

Provide additional details

The code of the video is:

            <VideoBg playsInline autoPlay loop muted src={process.env.PUBLIC_URL + "/video.mp4"} type='video/mp4' />

I used the same src for some svgs and for the svgs it works. I dont have any clue how I could fix that.

[n10000k]

When you open up your Amplify hosted version, do you see any errors in the console related to that resource? Can you also share this example?

[bill0x2A]

Hi, did you find a fix for this? I am having the same problem at the moment.

[about-coding]

Anyone find a solution for this problem?

Got a video background which is working on localhost, but after deploying to amplify I just get a white screen.

         <video
               autoPlay={autoPlay}
               className={clsx(dftStyles.video, styles?.video)}
               loop={loop}
               muted={muted}
               src={backgroundVideo}
            />

[mrmallette]

Same issue here, anyone find any fixes yet? I'm using an asset that's stored locally and remotely in the git repo and I don't see any errors in the console. All aspects of the app are deploying without issue, except for this one video background for the login page. Should the mp4 maybe be uploaded to AWS directly???

[lindsayjohnston]

I have this same problem with a video and a PDF on another app.

[Gtstride]

Does it mean, aws haven't found a fix to this issue, I am facing this exact issue, I even tried hosting with vercel and Netflix, it works perfectly, but on AWS, it just gives me a blank black background

[ghost]

Hi @Gtstride 👋🏽, can you provide reproduction steps or a sample repo that produces this bug? Also, please provide a screenshot of any error logs that appear in the browser's inspector. I've successfully deployed a react app with a video background using <video> and <ReactPlayer>components and did not run into this bug. This will be helpful for us to further troubleshoot. Thanks!

[mrmallette]

Still no solution from our end...we've since tried everything and anything we can think of. I've highlighted some of the details below just in case it sparks anything new!

• Converted the video from mp4 with AWS Media Converter , our S3 bucket now contains one of each, m3u8, mpd, mpeg, cmfa, cmfv)

• We created a CloudFront distribution and added our s3 bucket as the origin

• We updated the S3 bucket policy to... { "Version": "2012-10-17", "Statement": [{ "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "", "Action": "s3:GetObject", "Resource": [ "arn:aws:s3:::my-site/", "arn:aws:s3:::my-site" ]}]

• We updated the S3 CORS policy to allow every origin we could think of.... [{ "AllowedHeaders": [ "" ], "AllowedMethods": [ "PUT", "POST", "GET", "HEAD", "DELETE" ], "AllowedOrigins": [ "https://blahblahblah.cloudfront.net", "my-site.s3.us-east-2.amazonaws.com", "cdn.my-site.com", "https://www.my-site.com/", "https://www.my-site.com/", "my-site.com", "https://cdn.my-site.com", "https://my-site.com" ], "ExposeHeaders": [ "ETag" ]}

• We added a custom Cache & Origin Request policy in CloudFront to whitelist the below headers (Headers - Include the following headers Origin Access-Control-Request-Method Access-Control-Request-Origin Access-Control-Request-Headers)

• We think Chrome thinks it's working...

• We think CloudFront thinks we're getting it...the video is being requested and there are no console errors in Chrome or Firefox that we can see as the issue.

• 

• I've included the request/response headers from Firefox below just in case there's anything in there that we're missing/not understanding that might help.

REQUEST HEADERS GET /videos/blahblahblah.cmfa HTTP/2 Host: blahblahblah.cloudfront.net User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0 Accept: video/webm,video/ogg,video/;q=0.9,application/ogg;q=0.7,audio/;q=0.6,/;q=0.5 Accept-Language: en-CA,en-US;q=0.7,en;q=0.3 Range: bytes=0- Connection: keep-alive Referer: https://www.mysite.com/ Sec-Fetch-Dest: video Sec-Fetch-Mode: no-cors Sec-Fetch-Site: cross-site Cache-Control: max-age=0 If-Modified-Since: Sun, 09 Jan 2022 18:31:49 GMT If-None-Match: "blahblahblah"

RESPONSE HEADERS HTTP/2 206 Partial Content content-type: audio/mp4 content-length: 198038 date: Sun, 09 Jan 2022 19:03:28 GMT last-modified: Sun, 09 Jan 2022 18:31:49 GMT etag: "blahblahblah" x-amz-version-id: Jr_blahblahblah_GY4M accept-ranges: bytes server: AmazonS3 content-range: bytes 0-198037/198038 vary: Origin x-cache: Hit from cloudfront via: 1.1 blahblahblah.cloudfront.net (CloudFront) x-amz-cf-pop: YTO88-C1 x-amz-cf-id: blahblahblah-wNi1g== age: 6554 X-Firefox-Spdy: h2

[mrmallette]

@hloriana would you be able to share some sample code for your working '

[markhulia]

Any updates here? I'm facing the same issue

[BrianJenney]

App Settings -> Writes and Redirects

Add mp4 to your source address

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

[soplan]

App Settings -> Writes and Redirects

Add mp4 to your source address

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

I can confirm this works. Love you man! saved us a lot of headache figuring out why it was happening.

[calavera]

Thanks a lot for providing an answer @BrianJenney !

[gpr-indevelopment]

Amazing @BrianJenney thank you!

[antonioreyna]

i have the same problem, i was able to play the video adding the mp4 to the address, but after some time playing it stops and the requests to the partial video in the network tab look like 404

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.