# Stop Autoplaying Videos for Reduced-Motion Users

> Pauses autoplaying and looping background videos and adds visible controls when the visitor's device asks for reduced motion, so moving content never starts on its own.

- Type: HTML
- Runs: Site-wide footer
- Category: [Accessibility](https://wpide.com/library/category/accessibility/)
- Tags: reduced-motion, video, autoplay
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/a11y-pause-autoplay-media/

## Code

```html
<script>
(function () {
    var query = window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : null;
    if (!query || !query.matches) { return; }
    document.querySelectorAll('video[autoplay], video[loop]').forEach(function (video) {
        video.removeAttribute('autoplay');
        video.pause();
        video.setAttribute('controls', '');
    });
    document.querySelectorAll('img[src$=".gif"]').forEach(function (img) {
        img.setAttribute('loading', 'lazy');
    });
})();
</script>
```

## Notes

Remove the line that adds controls if your design uses a separate custom play button.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Stop Autoplaying Videos for Reduced-Motion Users" 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/