This is my code, I am trying to make so when I hover over the image it plays a video, and when you hover off it stops the video and goes back to the original image. The issue is when I hover off I am not able to rehover again to play the video again. I was wondering how I can do this so that I can hover over the image more than once to play the video. My coding is below:
<div class="thumb">
<video width="450" height="450" poster="assets/img/product/mac-flower.png" loop="true" preload="auto" onmouseover="this.play()" onmouseout="this.src='assets/img/product/mac-flower.png';">
<source src="assets/img/vid/mac-flower.MP4" type="video/mp4">
</video>
</div>
>Solution :
You can try to reload video onmouseout event, so that video shows poster again and replays onmouseover.
New Code:
<div class="thumb">
<video width="450" height="450" poster="assets/img/product/mac-flower.png" loop="true" preload="auto" onmouseover="this.play()"onmouseout="this.load()">
<source src="assets/img/vid/mac-flower.MP4" type="video/mp4">
</video>
</div>