Video player with custom play button

Thumbnail

.uk-position-relative(style="padding-top: calc(700 / 1280 * 100%)")
  a.uk-position-center.btn-video-control(href="#" style="background-image: url(<?php echo get_template_directory_uri(); ?>/assets/img/home-video_play-btn.svg);z-index: 20;")
  video.uk-position-center.uk-width-1-1(src="<?php echo esc_url(get_field('core_video')['url']); ?>" uk-video="autoplay: false" loop="" poster="<?php echo get_template_directory_uri(); ?>/assets/img/default_image.png")
.btn-video-control { display: block; width: 147px; height: 147px; background-position: 0 0; background-repeat: no-repeat; background-size: cover; -webkit-transition: opacity .2s ease; transition: opacity .2s ease; }
.btn-video-control.active { background-position: 0 -147px; opacity: 0; }
.uk-position-relative:hover .btn-video-control.active { opacity: 1; }
@include mq(640px){
  .btn-video-control{width: 50px; height: 50px;}
  .btn-video-control.active {background-position:0 -50px}
}
const is_mobile = window.matchMedia("(max-width: 640px)"),
  is_tablet = window.matchMedia("(max-width: 960px)");

Array.from(vars.btnVideoControl).forEach(element => {
  element.addEventListener('click', (e) => {
    e.stopImmediatePropagation();
    let video = e.currentTarget.parentNode.querySelector('video');
    (video.paused) ? video.play() : video.pause();
    if (!is_mobile.matches) { e.currentTarget.classList.toggle('active') }
    e.preventDefault();
  })
});