Видео с кастомным курсором

<!--Видео с кастомным курсором-->
<!--https://mt-webdesign.ru/cursor-video-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js'></script>
<!--Меняем путь до видео-->
<video style="object-fit: cover; background-size: cover; width: 100%; height: 100%" video preload="auto" playsinline loop="loop" id="myVideo">
<source src="https://dl.dropboxusercontent.com/s/bk4ojf2swq4ihcx/5252.mp4?dl=0" type="video/mp4">
</video>
<!--Меняем название кнопки-->
<div class='box'><div class='myBtn'><div class='tn-atom'>Play</div></div></div>
<!--Настройки кнопки-->
<style>
/*Отключаем кнопку на телефоне*/
@media screen and (max-width: 480px) {
.myBtn {
display: none !important;
}
.video-play-shape {
touch-action: auto !important;
}
}
/*Кастомизация кнопки*/
:root {
--VideoButtonColor: #000; /*цвет кнопки*/
--VideoButtonTextColor: #fff; /*цвет текста на кнопке*/
--FontFamily: Helvetica, Sans-Serif; /*Название шрифта*/
--FontSize: 12px; /*Размер шрифта*/
--FontWeight: 500; /*Толщина шрифта*/
--TextTransform: uppercase; /*текст капсом (убрать, если не нужен)*/
--VideoButtonWidth: 100px; /*ширина кнопки*/
--VideoButtonHeight: 100px; /*высота кнопки*/
--VideoButtonRadius: 50%; /*радиус скругления углов*/
}
</style>

<style>
body {
overflow-x: hidden;
}
#myVideo {
background-size: cover;
position: absolute;
left:0;
top:0;
}
.box {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
display: block;
overflow: hidden !important;
}
.transform-hide {
display: none;
}
.video-play-shape {
cursor: none !important;
touch-action: none;
}
.myBtn {
pointer-events: none;
position: absolute !important;
width: var(--VideoButtonWidth) !important;
height: var(--VideoButtonHeight) !important;
z-index: 99;
background: var(--VideoButtonColor);
cursor: none;
border-radius: var(--VideoButtonRadius) !important;
margin: 0 auto;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
touch-action: none;
top: 0;
left: 0;
}
.myBtn .tn-atom {
color: var(--VideoButtonTextColor);
font-family: var(--FontFamily);
font-size: var(--FontSize);
font-weight: var(--FontWeight);
text-transform: var(--TextTransform);
display: flex !important;
height: inherit;
align-items: center;
justify-content: center;
touch-action: none;
}
</style>
<!--Вешаем атрибуты на элементы-->
<script>
$(".video-play-shape").attr('onclick', 'myFunction()');
$(".myBtn .tn-atom").attr('id', 'play-video');
$(".video-play-shape").attr('id', 'folower');
$("#myVideo").appendTo(".video-container .tn-atom");
$(".myBtn").appendTo(".t-records");
</script>
<!--Скрываем блоки с задержкой-->
<script>
jQuery('.video-play-shape').click(function() {
window.setTimeout(function() {
jQuery('.transform-bottom').toggleClass('transform-hide');
jQuery('.transform-top').toggleClass('transform-hide');
}, 500);
});
</script>
<!--Добавляем курсор-->
<script>
var container = document.getElementById("folower");
var circle = document.querySelector(".myBtn");
TweenMax.set(circle, { scale: 0, xPercent: -50, yPercent: -50 });
container.addEventListener("pointerenter", function(e) {
TweenMax.to(circle, 0.3, { scale: 1, opacity: 1 });
positionCircle(e);
});
container.addEventListener("pointerleave", function(e) {
TweenMax.to(circle, 0.3, { scale: 0, opacity: 1 });
positionCircle(e);
});
container.addEventListener("pointermove", function(e) {
positionCircle(e);
});
function positionCircle(e) {
var rect = container.getBoundingClientRect(); 
var relX = e.pageX - container.offsetLeft;
var relY = e.pageY - container.offsetTop;
TweenMax.to(circle, 0.3, { x: relX, y: relY });
}
</script>

<script>
var video = document.getElementById("myVideo");
var btn = document.getElementById("play-video");
function myFunction() {
if (video.paused) {
video.play();
btn.innerHTML = "Pause";
} else {
video.pause();
btn.innerHTML = "Play";
}
}
</script>