I have a few posts with embedded videos. They work pretty well. I keep them pretty small (720p30), and the server doesn’t really care about streaming them. But, iOS was giving me an interesting issue.

No Thumbs

On every desktop browser that I have tested my site on, videos showed the first frame as the thumbnail.

However, this is how it looks on iOS.

Nothing, not until you hit play. Now, I could define a custom thumbnail, but I don’t want to. That would add to my workflow, and it doesn’t really fit a personal blog.

I tried adding the preload="metadata" attribute, but that didn’t fix it. So I went digging online. The solution, have the video start one thousandth of a second in.

<video preload="metadata" controls playsinline width="600">
	<source src='vid1.mp4#t=0.001' type="video/mp4">
	<p>Your bowser don't support HTML5 video</p>
</video>

It feels stupid, but it works.

A standard that’s not implemented in a standard way. Feels like an XKCD.