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.
Opens WPIDE on
Code
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 add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.