Playing video on hover only

Plasmic Studio Questions
1

Hey guys! Does anyone know how to set a video to play only when it’s hovered?

2

Hi @national_woodpecker! Unfortunately there’s no built-in way to do this without code. But you can add a script tag anywhere to your page (using the Custom HTML Embed component) that does this:

<script>
document.addEventListener('mouseover', e => {
  if (e.target instanceof HTMLVideoElement && e.target.matches('.autoplay video')) {
    e.target.play();
  }
});
document.addEventListener('mouseout', e => {
  if (e.target instanceof HTMLVideoElement && e.target.matches('.autoplay video')) {
    e.target.pause();
  }
});
</script>

And then make sure your videos that you want to autoplay are anywhere inside of a vertical stack (or any other container) with an HTML attribute class name of autoplay

3

Let me know if that helps!