Like the code snippets below, the dove set I set as the current in the project I’m working on stays at the bottom of the video. There was no way he could reach the top. Z indexing the video tag unfortunately does not solve the problem. Can you help

var crs = document.querySelector('.cursor');

document.addEventListener('mousemove', (e) => {
  var ds1 = e.clientX - crs.clientWidth / 2;
  var ds2 = e.clientY - crs.clientHeight / 2;

  crs.setAttribute('style', `position: fixed;left:${ds1}px;top:${ds2}px;z-index:999;`);

})
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  cursor: none;
  scroll-behavior: smooth;
}

.cursor {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #000 !important;
  mix-blend-mode: difference;
  transition: padding .4s;
  position: fixed;
  z-index: 999;
  pointer-events: none;
}

#home-vd {
  position: relative;
  z-index: 10;
}
<video class="video" id="home-vd" src="https://www.w3schools.com/tags/movie.mp4"></video>

<div class="cursor" id="cursor">

</div>

1

Sounds like mix-blend-mode: difference Your problem is Removing it makes it look fine:

var crs = document.querySelector('.cursor');

document.addEventListener('mousemove', (e) => {
  var ds1 = e.clientX - crs.clientWidth / 2;
  var ds2 = e.clientY - crs.clientHeight / 2;

  crs.setAttribute('style', `position: fixed;left:${ds1}px;top:${ds2}px;z-index:999;`);

})
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  cursor: none;
  scroll-behavior: smooth;
}

.cursor {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #000 !important;
  /* mix-blend-mode: difference; */
  transition: padding .4s;
  position: fixed;
  z-index: 999;
  pointer-events: none;
}

#home-vd {
  position: relative;
  z-index: 10;
}
<video class="video" id="home-vd" src="https://www.w3schools.com/tags/movie.mp4"></video>

<div class="cursor" id="cursor">

</div>

I don’t know much about blending methods, but that seems to be the case when used difference It will end with the preview Someone Background color:

var crs = document.querySelector('.cursor');

document.addEventListener('mousemove', (e) => {
  var ds1 = e.clientX - crs.clientWidth / 2;
  var ds2 = e.clientY - crs.clientHeight / 2;

  crs.setAttribute('style', `position: fixed;left:${ds1}px;top:${ds2}px;z-index:999;`);

})
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  cursor: none;
  scroll-behavior: smooth;
}

.cursor {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #000 !important;
  mix-blend-mode: difference;
  transition: padding .4s;
  position: fixed;
  z-index: 999;
  pointer-events: none;
}

#home-vd {
  position: relative;
  z-index: 10;
}

.block {
  height: 300px;
  width: 300px;
  background-color: magenta;
  color: white;
}
<h1 class="block">hi hi hi hi</h1>

<div class="cursor" id="cursor">

</div>

If you use different colors, you can see that your result is more usable:

var crs = document.querySelector('.cursor');

document.addEventListener('mousemove', (e) => {
  var ds1 = e.clientX - crs.clientWidth / 2;
  var ds2 = e.clientY - crs.clientHeight / 2;

  crs.setAttribute('style', `position: fixed;left:${ds1}px;top:${ds2}px;z-index:999;`);

})
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  cursor: none;
  scroll-behavior: smooth;
}

.cursor {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #555 !important;
  mix-blend-mode: difference;
  transition: padding .4s;
  position: fixed;
  z-index: 999;
  pointer-events: none;
}

#home-vd {
  position: relative;
  z-index: 10;
}

.block {
  height: 300px;
  width: 300px;
  background-color: magenta;
  color: white;
}
<h1 class="block">hi hi hi hi</h1>

<div class="cursor" id="cursor">

</div>

I’m sure there’s someone here does Know a lot about blending methods that can explain the mathematics of color behind it.

4