How to hide custom cursor on iframe?

Hello. I've been trying to hide my custom cursor when hovering over embedded video from Vimeo.
Found this code on the web and tried to Code Inject but it doesn't work in my case.

<script> 
let iframe = document.querySelector("iframe");
let videoWrapper = document.querySelector(".project-component_extra-embed");
let mouseCursor = document.querySelector(".cursor"); 


iframe.addEventListener("mouseover", function() {
  mouseCursor.style.display = 'none';
});

iframe.addEventListener("mouseleave", function() {
  mouseCursor.style.display = 'flex';
});
  
videoWrapper.addEventListener("mouseover", function() {
  mouseCursor.style.display = 'none';
});

videoWrapper.addEventListener("mouseleave", function() {
  mouseCursor.style.display = 'flex';
});
</script>

My website: https://evolsound.squarespace.com/work
Pass: LightboxAnything
(The issue can be seen on any of the projects)

Does anyone know how this can be done?

I've tried to adapt the code found here https://codepen.io/yoseftuk/pen/RwPrJXx to my case, but still no luck. 
My custom cursor just gets stuck in the border of the iframe element without hiding.