Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2022-09-07T07:24:10.200Z
Answers.Text: The first approach is satisfying my requirement. Thanks
Answers.UserDisplayName: Vinod Patidar
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2022-09-07T05:20:10.380Z
Answers.LastActivityDate: 2022-09-07T05:29:26.600Z
Answers.LastEditDate: 2022-09-07T05:29:26.600Z
Answers.UserDisplayName: RomanAvr
Body: <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>
  
Tags: <eager-loading><video>
Title: Load video on hover in craft cms
ThreadText: # 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"(<video preload="none"...) and then
  
  1. Load video on hover
  
     video.removeAttribute("preload")
  2. Or make via [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) (as soon as you scroll to the container with the video, it loads)
  
  > **Comments:**
  > **username_0**: The first approach is satisfying my requirement. Thanks  
  
  ---
  
  