Скрыть пользовательский курсор SVG поверх вставки видео iframe ⇐ Jquery

[Anonymous]

Похоже на этот вопрос, но мне не удалось заставить ответы работать с моим существующим кодом. У меня есть собственный курсор, который представляет собой встроенный SVG, он отлично работает везде (и прокручивается вместе со страницей), но застревает на краю iframe из-за встраивания Vimeo. Я хотел бы скрыть его, когда мышь входит в iframe, и вернуть его при выходе. Как мне настроить приведенный ниже код, чтобы последняя часть JS работала правильно?

Код: Выделить всё

let lastX, lastY, lastScrolled = 0;;
$(document).on('mousemove', function(e) {
lastX = e.pageX - 1;
lastY = e.pageY - 1;
$('#cursor').css({
left: e.pageX - 1,
top: e.pageY - 1,
pointerEvents: 'none'
});
});

$(window).scroll(function(event) {
if (lastScrolled != $(window)
.scrollTop()) {
lastY -= lastScrolled;
lastScrolled = $(window)
.scrollTop();
lastY += lastScrolled;
}
$('#cursor').css({
left: lastX,
top: lastY,
pointerEvents: 'none'
});
});
var iframe = document.querySelector("iframe");
iframe.addEventListener("mouseover", function() {
cursor.style.display = 'none';
})
iframe.addEventListener("mouseleave", function() {
cursor.style.display = 'block';
})

Код: Выделить всё

body,html { cursor: none !important; }
#cursor {display: block; position: absolute; z-index: 9999; pointer-events:none;
width: 1.2rem; height: auto; }
/*  width: 6.666rem; */
@media only screen and (max-width: 960px) {
* { cursor: default !important; }
#cursor{display: none;}
}
#cursor .cursorshape {fill: #d9e021;}

.embedvid {position: relative; height: 0; overflow: hidden; max-width: 100%;}
.embedvid iframe, .embedvid object, .embedvid embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.ratio-16-9 {padding-bottom: 56.25%;}

Код: Выделить всё

https://player.vimeo.com/video/766323945

Подробнее здесь: https://stackoverflow.com/questions/790 ... ideo-embed