javascript - Display background video on menu mouseover

Question

I am trying to display different videos when I mouseover elements from a menu. When I go from one video to another the transition isn't smooth at all.

Does anyone know how I can do that? Also, does anyone know the best way to work with around 15 short videos on a web page and make the loading faster? Thanks!

$(document).ready(function() {
  var image = $("body").find('video').attr('src');

  $("ul li a").mouseover(function() {
    var currentImage = $(this).attr('data-video');
    $(this).parent().parent().parent().find('video').attr("src", currentImage)
    $("body video").animate()
  })
})

body {
  background-color: cyan;
  margin: 0;
  padding: 0;
}

ul li {
  display: inline-block;
  width: 100%;
}

ul li a {
  color: grey;
  font-size: 90px;
  list-style: 1.2;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
}

video {
  position: fixed;
  top: 0;
  right: 0;
  overflow: hidden;
  z-index: -100;
  transition: all ease-in-out .5s;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video loop muted autoplay width="110%" height="auto">
  <source src="video1.mp4" type="video/mp4"/> 
</video>
<ul>
  <li><a data-video="video1.mp4" href="">First</a></li>
  <li><a data-video="video2.mp4" href="">Second</a></li>
  <li><a data-video="video3.mp4" href="">Third</a></li>
  <li><a data-video="video1.mp4" href="">Fourth</a></li>
</ul>

question from:https://stackoverflow.com/questions/66066464/display-background-video-on-menu-mouseover

Answer 1

Waitting for answers