# Play Videos on Hover

> Plays muted Video blocks with the class "wpide-hover-play" while the mouse is over them and pauses when it leaves, like product previews in online stores.

- Type: JavaScript
- Runs: Site-wide footer
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: video, hover, media
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-hover-play-videos/

## Code

```javascript
document.querySelectorAll('.wpide-hover-play video').forEach(function (video) {
    video.muted = true;
    video.playsInline = true;
    video.preload = 'metadata';
    video.removeAttribute('autoplay');
    var play = function () { var p = video.play(); if (p && p.catch) { p.catch(function () {}); } };
    video.addEventListener('mouseenter', play);
    video.addEventListener('focus', play);
    video.addEventListener('mouseleave', function () { video.pause(); });
    video.addEventListener('blur', function () { video.pause(); });
    video.addEventListener('touchstart', function () { if (video.paused) { play(); } else { video.pause(); } }, { passive: true });
});
```

## Notes

Add wpide-hover-play to the Video block's Additional CSS class(es). On touch screens a tap plays and pauses instead.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Play Videos on Hover" in its snippet library and add it in one click; or create a new JavaScript snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/