Hey everyone! I'm a beginner in web development and I'm running into a problem with my website project. The background video worked perfectly when I tested it using the Live Server extension in VSCode and also while it was deployed to Netlify. However, after deploying it to Cloudflare, the background video just won't play.
The video is in .MP4 format and the file paths seem to be correct because everything else on the website is functioning without issues. I tried checking for solutions online, but it seems like others have faced the same problem without clear fixes provided.
I spoke with Claude (my trusty AI assistant) who suggested exploring the developer tools in Google Chrome. According to the network tab, the video file is showing a 200 status, and the file size is only 16kb, which looks okay at first glance. The only glitch I noticed is that the content type is being treated as "text/HTML; charset=utf-8". Claude recommended creating a headers file to set content type rules, which I did, but it still hasn't worked.
I'm turning to you all for some discussion and potential solutions. Has anyone experienced this issue or knows how to resolve it?
2 Answers
Are you sure you're using a relative path? A good troubleshooting step is to try linking to an online video URL. If it works on production, then your issue could be with the file path.
Check out Cloudflare's documentation regarding video delivery. They have specific policies that might affect how videos are handled. You might find some useful insights there! Here's the [link to the documentation](https://developers.cloudflare.com/fundamentals/reference/policies-compliances/delivering-videos-with-cloudflare/).
I read through the documentation, and it mentions the "Stream" product. It seems like that's for on-demand videos, but I'm just trying to add a simple background loop. It feels like the Stream feature shouldn't be relevant here, especially with a tiny video file like mine.
I mentioned in my post that my file paths are correct. Just to clarify, I’m using absolute paths: "/videos/background.mp4". They've worked fine on both Netlify and in VSCode, so I'm confident it's not a path issue.