Slick and Youtube video pause on play start on end video

I'm using slick.js to show a Youtube video in the carousel. That video should autoplay when slide is visible and after end of the video the next slide need to be shown.

I have found a great codepen idea which exactly does what I want. However I just can't figure out how to stop the autoplay of the slider when the youtube video plays and at the end continue to next slide.

What I have is this (those weird tags are Twig tags):

<section id="headlines" class="main-slider banner">
   <div class="slide-item youtube">
     <iframe class="embed-player slide-media" width="980" height="520" src="https://www.youtube.com/embed/?enablejsapi=1&controls=1&fs=0&iv_load_policy=3&rel=0&showinfo=0&loop=1&playlist=&start=&end=" frameborder="0" allowfullscreen></iframe>
  </div>
</section>

<script>
 var slideWrapper = $(".main-slider"),
    iframes = slideWrapper.find('.embed-player'),
    lazyImages = slideWrapper.find('.slide-image'),
    lazyCounter = 0;

// POST commands to YouTube or Vimeo API
function postMessageToPlayer(player, command){
  if (player == null || command == null) return;
  player.contentWindow.postMessage(JSON.stringify(command), "*");
  //console.log(command, player)
}

// When the slide is changing
function playPauseVideo(slick, control){
  var currentSlide, slideType, startTime, player, video;
  currentSlide = slick.find(".slick-current");
  slideType = currentSlide.attr("class").split(" ")[1];
  player = currentSlide.find("iframe").get(0);
  startTime = currentSlide.data("video-start");

  if (slideType === "youtube") {
    switch (control) {
      case "play":
        postMessageToPlayer(player, {
          "event": "command",
          "func": "mute"
        });
        postMessageToPlayer(player, {
          "event": "command",
          "func": "playVideo"
        });
        break;
      case "pause":
        postMessageToPlayer(player, {
          "event": "command",
          "func": "pauseVideo"
        });
        break;
    }
  }
}
$(function() {

  // Initialize
  slideWrapper.on("init", function(slick){
    slick = $(slick.currentTarget);
    setTimeout(function(){
      playPauseVideo(slick,"play");
    }, 1000);
  });
  slideWrapper.on("beforeChange", function(event, slick) {
    slick = $(slick.$slider);
    playPauseVideo(slick, "pause");
  });
  slideWrapper.on("afterChange", function(event, slick, currentSlide, nextSlide) {
    slick = $(slick.$slider);
    playPauseVideo(slick, "play");
   
    /* THIS IS WHAT I TRIED */ 
    /* var vid = $(slick[currentSlide]).find('video');
    if (vid.length > 0) {
      slideWrapper.slick('slickPause');
      $(vid).get(0).play();
    }    
    $('video').on('ended',function(){           
      console.log('Video Complete')
      slideWrapper.slick('slickPlay');
    });*/

  });


  //start the slider
  slideWrapper.slick({
      autoplay: true,
      autoplaySpeed:4000,
      lazyLoad:"progressive",
      speed:600,
      arrows:true,
      dots:true,
      cssEase:"cubic-bezier(0.87, 0.03, 0.41, 0.9)"
    });
  });

</script>

I just can't see how I can still set the carousel to autoplay but stop the autoplay at a video, and resume autoplay after the video ends. Or do I have the wrong approach?

from Slick and Youtube video pause on play start on end video