HTML Video

Updated on

Compression

Tools

Reading

Thumbnails

For some reason, mobile browsers don't display the first frame as a thumbnail. At least that's been my experience.

The solution is pretty simple. Take a screenshot of the first frame and set it as the thumbnail manually.

I have a mac, so I used shiftCmd5 to take the screenshot. I Squooshed the image, then set it as the thumbnail. To do that, you use the video element's poster attribute.

<video controls="controls" poster="/thumbnail.jpg">
<source src="/video.mp4" type="video/mp4" />
</video>