Preview of video when mouse is hovering

I am trying to create a function, in JavaScript, where you can preview a video by hovering the mouse over it. I want it to be similar to YouTube where you preview when you hover the mouse over the thumbnail.

Here is my HTML and CSS:

.Lilo_og_Stitch_film {
position: absolute;
right: 0;
min-width: -10%;
margin-left: 20%;
margin-right: 20%;
}

.Drage_treneren2_film {
position: absolute;
right: 1;
min-width: -10%;
margin-left: 20%;
margin-right: 20%;
}

<div class="Lilo_og_Stitch_film">

  <video width="320" height="240" src="Lilo og stitch film med text.mp4" controls></video>

</div>

<div class="Drage_treneren2_film">

  <video width="320" height="240" src="Drage treneren 2 dubb.mp4" controls></video>

</div>

<!-- begin snippet: js hide: false console: true babel: false -->

This is how it looks with HTML and CSS: Picture of website

Answer

you need javascript to auto play and stop the video, not css

document.querySelectorAll('.videoPreview').forEach(function(vid) {
  vid.onmouseover = function() {
    this.play();
  }
  vid.onmouseout = function() {
    this.load(); // stop and show poster
  }
})

<video class="videoPreview" muted width="240" height="180" src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4" poster="https://img.youtube.com/vi/aqz-KE-bpKQ/hqdefault.jpg"></video>

<video class="videoPreview" muted width="240" height="180" src="https://test-videos.co.uk/vids/jellyfish/mp4/h264/360/Jellyfish_360_10s_1MB.mp4" poster="https://i.ytimg.com/vi/QV5afHQ08TE/hqdefault.jpg"></video>

Answer

Leave a Reply Cancel reply