AWS Amplify removed video sources from HTML

A good amount the websites I’ve pushed to production in the past couple of years have all been hosted on-prem within my client’s data centers. However, not all of my clients have test environments. Up until recently I’ve been hosting my test sites with Server4You, a fantastic non AWS/Azure/GCP hosting company/provider. But with the rise of AWS and Azure I want to start venturing over that way to gain experience and play around with those providers some more.

I’m starting with a front end only React app that I’ve developed for a client which will ultimately live in their data center when the site goes live, but to test while we’re building the site I decided to give AWS Amplify a try. This service is awesome and hooks right into Gitlab for automated CI/CD with a couple button clicks. Awesome as it is, I did run into one problem: My video src references were stripped out during the CI/CD process.

The site has three HTML5 video references to mp4s that are hosted within the build folder at the root of the web project. When the AWS Amplify CI/CD process migrated my code over to the hosting web server all of my src references were blank – <video src="" />.. I tried referencing the videos in a couple different ways from the React app but nothing seemed to work.

To get the video links to work in AWS Amplify, I ended up creating a S3 storage account, uploading my videos to a S3 bucket , assigned the appropriate permissions then referencing the videos in code to pull from the S3 bucket which ended up fixing the problem.

I haven’t been able to find any documentation that explicitly says that video sources are removed but hosting the videos in S3 fixed the issue for me.