如何在播放 viemo 自动播放视频时暂停光滑的滑块

Question

我创建了 slick.js 滑块，在该滑块中我使用了 2 个带有自动播放模式的 iframe viemo 视频和 2 个图像，我正在尝试的是如何在播放 iframe vimeo 自动播放视频时暂停当前滑块，在完成视频后滑块具有改变

$(document).ready(function () {
    $('.slick_slider').slick({
        dots: false,
        infinite: true,
        speed: 2000,
        autoplay: true,
        arrows: false
    });

});

 var iframe = document.querySelector('iframe');
    var player = new Vimeo.Player(iframe);

<link href="https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css" rel="stylesheet"/>
<script src="https://player.vimeo.com/api/player.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slick_slider">


            <div class="vimeo-wrapper">
                <iframe src="http://player.vimeo.com/video/565964510?api=1&byline=0&portrait=0&title=0&background=1&muted=0&autoplay=1&id=565964510" allow=autoplay  frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            </div>

        <div>
            <img src="assets/img/img-0.jpg" class="entity-img" alt="Image"/>
        </div>

            <div class="vimeo-wrapper">
                <iframe src="https://player.vimeo.com/video/565972134?api=1&byline=0&portrait=0&title=0&background=1&muted=0&autoplay=1&id=565972134" allow=autoplay frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            </div>

        <div>
            <img src="assets/img/img-6.jpg" class="entity-img" alt="Image"/>
        </div>

            <div class="vimeo-wrapper">
                <iframe src="https://player.vimeo.com/video/575808908?api=1&byline=0&portrait=0&title=0&background=1&muted=0&autoplay=1&id=575808908" allow=autoplay frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            </div>

        <div>
            <img src="assets/img/img-1.jpg" class="entity-img" alt="Image"/>
        </div>


    </div>