Video Follow on Mouse Move in React

Question

I have this javascript function that autoplays a Vimeo video and attaches to the cursor when hovering over an element. I'm trying to figure out how to do this in React but I'm not having any luck. Originally, I was using Froogaloop and Vimeo player api which seemed to work just fine, but not in react.

Here is the code below

Script

document.getElementById("div").addEventListener("mousemove", function() {
  myFunction(event);
});

var mouse;
var cursor = document.getElementById("cursor");
function myFunction(e) {
  mouseX = e.clientX;
  mouseY = e.clientY;
  cursor.style.left = (mouseX - 55) + "px";
  cursor.style.top = (mouseY - 55) + "px";
}

// play video on hover
const iframe = document.getElementById('video');

// $f == Froogaloop
const player = $f(iframe);

// bind events
var mouseEntering = document.getElementById("div");
mouseEntering.addEventListener("mouseenter", function() {
  player.api("play");
});

var mouseLeaving = document.getElementById("div");
mouseLeaving.addEventListener("mouseleave", function() {
  player.api("unload");
});

HTML

<div id="div" class="div">
    <div id="cursor" class="cursor">
      <iframe id="video" class="video" src="https://player.vimeo.com/video/649593940?api=1&loop=1&muted=1" width="400px"
    height="300px" frameborder="0"></iframe>
    </div>
  </div>

CSS

.wrapper{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(241px,1fr));
  gap: 20px;
}
.div:hover{
  cursor:pointer;
}
.div:hover .cursor{
  visibility:visible;
}
.cursor {
  visibility:hidden;
  position: absolute;
  transform:translate(80px,50px);
  background:red;
  backface-visibility: hidden;
  z-index: 9999999;
  pointer-events: none; /* pointer-events: none is needed */
  cursor: none;
}

.div {
  background: blue;
  height:200px;
  width:100%;
  cursor: none;
}

Here is a full working example on codepen

Any help on how to do this in react would be awesome.

Video Follow on Mouse Move in React

0 Answers0