Next.js Discord

Discord Forum

Video Thumbnail Not Showing on Mobile

Unanswered
Siamese Crocodile posted this in #help-forum
Open in Discord
Siamese CrocodileOP
Hi, my website has an issue when an user uploads a video from an iPhone. The video just shows a play button but not the thumbnail. However, it shows the thumbnail when viewing on desktop. I believe it has to do with image optimization or something with filetypes like .mov. The videos are hosted on a s3 bucket and I'm not sure what is causing the issue. I have tried a couple of different things like adding the attribute poster and preload="metadata" but it still only shows a play button. I forgot to mention that I'm hosting the site on Vercel. Next Version 13.4.7

{
  report.imageUrl.endsWith(".mp4") ? 
    <video width={500} height={500} className="h-auto w-full max-w-full rounded object-cover" controls>
      <source src={report.imageUrl} type="video/mp4" />
    </video>
  :
    <Image src={report.imageUrl} alt="Report image" width={500} height={500} className="h-full w-full max-w-full rounded object-contain" />
}

1 Reply

Siamese CrocodileOP
Here is an image to show what I'm talking about.