<pre><code>document.querySelectorAll('.my-video').forEach(video =&gt; {
  video.addEventListener(&quot;mouseenter&quot;, function () {
    video.play();
  })
  video.addEventListener(&quot;mouseleave&quot;, function () {
    video.pause();
  })
})
</code></pre>
<p>You also need to add lazy loading, you can go 2 ways, but firstly change video attribute &quot;preload&quot; to &quot;none&quot;(&lt;video preload=&quot;none&quot;...) and then</p>
<ol>
<li><p>Load video on hover</p>
<p>video.removeAttribute(&quot;preload&quot;)</p>
</li>
<li><p>Or make via <a href="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API" rel="nofollow noreferrer">Intersection Observer</a> (as soon as you scroll to the container with the video, it loads)</p>
</li>
</ol>

CC BY-SA 4.0
2022-09-07T07:24:10.200Z
The first approach is satisfying my requirement. Thanks
Vinod Patidar
CC BY-SA 4.0
2022-09-07T05:20:10.380Z
2022-09-07T05:29:26.600Z
2022-09-07T05:29:26.600Z
RomanAvr
<p>I have a slider in my craft website where images are showing as item. When I hover on image it will display none and video will play. There are lots of video files. So when i refresh the page then it is taking time for loading because of video files. Any idea how can i fetch video from server when hover on image ?</p>

<eager-loading><video>
Load video on hover in craft cms
# Load video on hover in craft cms

(Asked by: username_0 on 2022-09-07)

I have a slider in my craft website where images are showing as item. When I hover on image it will display none and video will play. There are lots of video files. So when i refresh the page then it is taking time for loading because of video files. Any idea how can i fetch video from server when hover on image ?

**Tags:** eager-loading, video

---

## 1 answers

### Answer by username_1 on 2022-09-07. Score: 0 | Accepted answer

document.querySelectorAll('.my-video').forEach(video => {
  video.addEventListener("mouseenter", function () {
    video.play();
  })
  video.addEventListener("mouseleave", function () {
    video.pause();
  })
})

You also need to add lazy loading, you can go 2 ways, but firstly change video attribute "preload" to "none"(

Load video on hover
video.removeAttribute("preload")

Or make via Intersection Observer (as soon as you scroll to the container with the video, it loads)

> **Comments:**
> **username_0**: The first approach is satisfying my requirement. Thanks  

---

