I have a question about how to play / stop the video when I mouse over. The user placed the mouse over the image and the video started playing in the place of the image, and when it was moved, the image returned and the video disappeared. Is it possible and how? I tried something but I have not got what I want.

```js
$(document).on('ready', function() {
  $('.image').on('mouseover', function() {
    $('.video-preview').toggleClass('video-preview-show');
  })
})
```

```css
.image img {
  width: 272px;
  height: 160px;
}

.video-preview {
  width: 272px;
}

.video-preview {
  display: none
}

.video-preview-show {
  display: block;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="image">
  <img src="https://content.active.com/Assets/Active.com+Content+Site+Digital+Assets/Cycling/Galleries/Cyclists+Should+Never+Do/cyclist-front.jpg">
</div>

<video class="video-preview lazy-hidden" playsinline="" autoplay="" muted="" loop="" width="100%" src="https://giant.gfycat.com/VerifiableTerrificHind.mp4"></video>
```

[View on Codepen](https://codepen.io/anon/pen/jKYOow)