Video will not play anymore. Used to autoplay just fine.

Hi all..

website: https://cvma294.us

Problem

I have a video set to auto play on my index page. It had been working just fine from the Vercel servers. I made some code changes, pushed to Git and now that video will not play. The changes I made had absolutely nothing do do with the video, or the html tag.

What I’ve Tried

  • I know that things here on Vercel are case sensitive and I’ve ensured that case sensitivity is not the issue…
  • I turned on directory browsing on my project so I could verify that the video is up there, which it is. But, just like from my index.html page, the video will not play.
  • I have verified that the video is not corrupt on my local machine. I’ve played it by launching it in windows media play, and tested my index.html page in three different local browsers, the video shows up and auto plays in all three.

Code Snippet

Here is my video tag. I’ve added the controls attribute to see if I could force it to play.

<video class="sizzleReel" width="100%" autoplay muted loop controls>
    <source src="./video/CampSizzle.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

Really odd that it was working now it wont.

Any help will be GREATLY apprecaited!

Rick

Hey Rick :slight_smile:

  • In your production website, have you also tested it on different browsers? What browser(s) are you using?
  • Have you changed the content of the video file itself?
  • What are you seeing in the page? Are you seeing the video and nothing happens when you click it? Or something else?
  • Have you amended the HTML around the video tag? I noticed the video element is wrapped in an anchor (a) tag, was that there before?

I visited the video URL directly (https://www.cvma294.us/video/CampSizzle.mp4) and it’s being served (ie not a 404) but I can see the video player stuck at 0:00 with no duration, which could meanthe file being served isn’t a valid/complete mp4, even though your local copy is fine.

Looking at the network tab, the total transfer for the whole page is only 122 bytes. Your video file alone should be more than this (megabytes at least), so what’s being deployed is essentially an empty/placehodler file and not the actual video.

A likely cause is Git LFS - if your repo uses Git LFS (or if Git automatically set it up for large files), Vercel deploys a small LFS pointer file instead of the actual video binary. That pointer still gets served with a video/mp4 MIME type, but it’s just a few hundred bytes of text so the browser can’t play it.

If that is the issue, Vercel has built-in Git LFS support which you can toggle on in your project settings - more info here: Git LFS support - Vercel

Redeploy after enabling it and the video should work again!


One other thing I noticed, your site only works at www.cvma294.us but not at cvma294.us (without the www). When I clicked the link in your original post, it didn’t work. You can add the bare domain in your Vercel project settings so it redirects to your www version, and Vercel handles this automatically once both are added!

More info on that here :slight_smile:

1 Like

Hi Maya
Thanks for the feedback. It was the GIT LFS support. I just turned it on and it all works fine now. I THINK originally I did NOT have LFS on my project because my mp4 was less than 100mb, but at some point I installed LFS into my repo just in case…

You are a life saver!!! Thank you much!

1 Like

Ah that’s great news! Glad to help :smiley:

Hi Maya

I went in and tried to figure out how to modify the redirect from a domain. Read through the documentation, but it’s not clear to me on how exactly to set this up.

I have the www.cvma294.us site, which is it’s own domain.
To add the cvma294.us redirect, do I crate a new domain with that URL and redirect it to production? And if so, I tried that but I get an invalid configuration error on that domain.

Hey Rick,

Here’s an example, I’m assuming right now you just see the www.cvma294.us here. Sounds like you’re nearly on the right track - if you go to Add Domain, you should be able to add cvma294.us to Redirect to Another Domain with the value www.cvma294.us :slight_smile:

Example here for reference:

Hi Maya…
That’s what I have tried… But I get the invalid configuration message.

Ah apologies!

Does it work if you select Connect to an environment > Production?

Hi maya, I already tired that, it didn’t work same error message. I also tried 308 Permanente redirect. That did not work either.