Tool: <click-to-play> — a still that plays

17th June 2026

Tool <click-to-play> — a still that plays — `<click-to-play>` is a web component that turns a linked still image into a tap-to-play animation. Without JavaScript, the element is a plain link to a GIF. Once defined, it intercepts the click, preloads the GIF off-screen, and swaps it in for the still so playback starts at the first frame. A second tap returns to the still, and the page shows the play, loading, and error states along with the component's source and a copy button.

A progressive enchantment Web Component that turns this markup:

<click-to-play>
  <a href="URL to GIF">
    <img src="URL to first frame" alt="...">
  </a>
</click-to-play>

Into a still frame with a click to play button which loads the GIF on demand. For when you don't want big GIFs to be loaded unless people want to play them.

Here's an example that demonstrates the new row editing tools in Datasette - in fact I built this Web Component for that post.

Posted 17th June 2026 at 3:56 am

Simon Willison’s Weblog

Recent articles

Monthly briefing