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

<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>