滑动滑块旋转木马的第一个视频在滑动到第二个时仍会播放

Question

我正在使用视频库，并且正在使用Slick滑块以这种形式呈现此内容：

这是我用于此设计的HTML代码：

<section id="video_tour" class="slider" style="background-color: #1A1A1A;">
        <div class="slider-for">
            <div class="video_box">
                <h3>An introduction to ApexSQL Diff</h3>
                <div class="videoWrapper">
                    <iframe class="player" src="https://www.youtube.com/embed/DMnTBpzH1OQ?showinfo=0?enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                </div>
            </div>
            <div class="video_box">
                <h3>An introduction to ApexSQL BI Monitor</h3>
                <div class="videoWrapper">
                    <iframe class="player" src="https://www.youtube.com/embed/fuzp6AHnJEA?showinfo=0?enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                </div>
            </div>
             <div class="video_box">
                <h3>An introduction to ApexSQL Doc</h3>
                <div class="videoWrapper">
                    <iframe class="player" src="https://www.youtube.com/embed/AlQ5HIRHj70?showinfo=0?enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                </div>
            </div>
             <div class="video_box">
                <h3>ApexSQL Doc - Automating SSIS package documentation</h3>
                <div class="videoWrapper">
                    <iframe class="player" src="https://www.youtube.com/embed/oLoxTwjHHnw?showinfo=0?enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                </div>
            </div>
        </div>
        <div class="slider-nav">
            <div>
                <img class="nav_image" src="../sliderslick/videos/SSIS/intro-ApexSQL-Diff.png" alt="">
                <p class="video_caption">An introduction to ApexSQL Diff</p>
            </div>
            <div>
                <img class="nav_image" src="../sliderslick/videos/SSIS/intro-ApexSQL-BI-Monitor.png" alt="">
                <p class="video_caption">An introduction to ApexSQL BI Monitor</p>
            </div>
            <div>
                <img class="nav_image" src="../sliderslick/videos/SSIS/intro-ApexSQL-Doc.png" alt="">
                <p class="video_caption">An introduction to ApexSQL Doc</p>
            </div>
            <div>
                <img class="nav_image" src="../sliderslick/videos/SSIS/SSIS-ApexSQL-Doc.png" alt="">
                <p class="video_caption">ApexSQL Doc - Automating SSIS package documentation</p>
            </div>
        </div>
    </section>

class =“ slider-for”下的代码的第一部分是库的上部，并且包含视频的iframe。 class =“ slider-nav”下代码的第二部分用于滑块导航，在这里我使用视频本身的图像，也使用图库中的箭头导航。

对于JS，我正在使用Slider Slick提供的代码：

$('.slider-for').slick({
          slidesToShow: 1,
          slidesToScroll: 1,
          arrows: false,
          fade: true,
          asNavFor: '.slider-nav'
        });
        $('.slider-nav').slick({
          slidesToShow: 3,
          slidesToScroll: 1,
          asNavFor: '.slider-for',
          dots: true,
          centerMode: true,
          focusOnSelect: true
        });

此设计的问题是，当我播放视频X并滑到视频Y时，视频X仍在播放。当我开始播放视频Y时，两个视频都同时播放。更换幻灯片后如何停止播放视频？

我已经尝试过通过此问题解决问题，但这没有用。

Slick slider pause youtube video when slide change

我对JS的了解有限，因此非常乐意提供帮助。