The div I set as cursor stays under the video

Question

As in the code snippet below, in a project I'm working on, the div I set as cursor stays under the video. No way could I get it to the top. Giving a z-index to the video tag does not solve the problem unfortunately. Can you please 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>

Answer 1

Seems like the mix-blend-mode: difference is your problem; removing it makes it appear just 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 blend modes, but it appears that a when using difference with as the foreground the it will disappear on any 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 a different color, you can see 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 someone out here who does know a lot about blend modes could explain the color math behind it.