# Pause Animated GIFs Until Clicked

> Shows the first frame of every animated GIF in your content with a play button, and only plays the animation when the visitor clicks, so moving images never start on their own.

- Type: HTML
- Runs: Site-wide footer
- Category: [Accessibility](https://wpide.com/library/category/accessibility/)
- Tags: gif, animation, wcag
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/a11y-gif-click-to-play/

## Code

```html
<style>
.wpide-gif{position:relative;display:inline-block;max-width:100%;}
.wpide-gif canvas,.wpide-gif img{max-width:100%;height:auto;display:block;}
.wpide-gif button{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:10px 16px;border:2px solid #fff;border-radius:6px;background:rgba(0,0,0,.75);color:#fff;font-size:15px;cursor:pointer;}
.wpide-gif button:focus-visible{outline:3px solid #ffeb3b;outline-offset:2px;}
</style>
<script>
(function () {
    function freeze(img) {
        if (img.dataset.wpideGif) { return; }
        img.dataset.wpideGif = '1';
        var canvas = document.createElement('canvas');
        canvas.width = img.naturalWidth;
        canvas.height = img.naturalHeight;
        canvas.setAttribute('role', 'img');
        canvas.setAttribute('aria-label', img.alt || 'Animated image');
        try { canvas.getContext('2d').drawImage(img, 0, 0); } catch (e) { return; }
        var box = document.createElement('span');
        box.className = 'wpide-gif';
        var btn = document.createElement('button');
        btn.type = 'button';
        btn.textContent = 'Play animation';
        btn.setAttribute('aria-pressed', 'false');
        img.parentNode.insertBefore(box, img);
        box.appendChild(canvas);
        box.appendChild(btn);
        img.style.display = 'none';
        box.appendChild(img);
        btn.addEventListener('click', function () {
            var playing = btn.getAttribute('aria-pressed') === 'true';
            btn.setAttribute('aria-pressed', playing ? 'false' : 'true');
            btn.textContent = playing ? 'Play animation' : 'Pause animation';
            canvas.style.display = playing ? 'block' : 'none';
            img.style.display = playing ? 'none' : 'block';
            if (!playing) { var src = img.src; img.src = ''; img.src = src; }
        });
    }
    document.querySelectorAll('.entry-content img[src*=".gif"], .wp-block-post-content img[src*=".gif"]').forEach(function (img) {
        if (img.complete && img.naturalWidth) { freeze(img); } else { img.addEventListener('load', function () { freeze(img); }, { once: true }); }
    });
})();
</script>
```

## Notes

GIFs loaded from other domains still work; clicking again pauses the animation.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Pause Animated GIFs Until Clicked" in its snippet library and add it in one click; or create a new HTML snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/