嵌入的youtube视频如何在关闭的时候停止播放？

HTML

<!-- 打开视频文件 -->
<div class="video-box">
    <div class="vdobox">
        <p class="myg"><span class="iconfont icon-guanbi"></span></p>
        <div id="playerq0"></div>
        <!-- <iframe id="vo" width="100%" height="100%" src="{$newsDetail.video_link}" frameborder="0"
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> -->
    </div>
</div>

 

js

<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
</script>
<script>
    // 关闭视频播放。
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    var playerq0;

    function onYouTubeIframeAPIReady() {
        console.log("init")
        playerq0 = new YT.Player('playerq0', {
            height: '100%',
            width: '100%',
            videoId: '{$newsDetail.video_link}',
            playerVars: {
                'rel': 0,
                'showinfo': 0,
            },
            events: {
                'onStateChange': onPlayerStateChange,
            }
        });
    }

    function onPlayerReady(event) {
        event.target.playVideo();
    }
    var done = false;

    function onPlayerStateChange(event) {}

    function stopVideo() {
        playerq0.stopVideo();
    }
    $('.bofang').click(function () {
        $('.video-box').show();

    })
    $('.myg').click(function () {
        $('.video-box').hide();
        stopVideo();
    })

CSS

 .video-box {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        z-index: 9999999
    }

    .video-box .vdobox {
        width: 70%;
        height: 600px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)
    }

    .video-box .vdobox .myg {
        display: inline-block;
        width: 30px;
        height: 30px;
        position: absolute;
        text-align: center;
        right: -30px;
        top: -30px
    }

    .video-box .vdobox .myg .iconfont {
        font-size: 30px;
        color: #fff
    }

 

循环出来的视频

html

<div class="vi_box">
    {foreach name="recommendNew" key="index" item="vo"}
    <div class="vdobox" data-id='{$index}'>
        <p class="myg"><img src="{$picture.bi}" alt=""></p>
        <div id="playerq{$index}" data-vid="{$vo.video_link | substr=30,50}"></div>
    </div>
    {/foreach}
</div>

js

<script>
    $('.vidoply').click(function (e) {
        console.log(e.currentTarget.dataset.id)
        $('.vi_box').css('display', 'block');
        $(".vdobox").css('display', 'none');
        $(".vdobox").eq(e.currentTarget.dataset.id).css("display", "block");

    })
    var tag = document.createElement('script');

    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    var playerq0;
    var playerq1;
    var playerq2;
    var a = $('#playerq0')[0].dataset.vid;
    var b = $('#playerq1')[0].dataset.vid;
    var c = $('#playerq2')[0].dataset.vid;
    console.log(a, b, c);

    function onYouTubeIframeAPIReady() {
        console.log("init")
        playerq0 = new YT.Player('playerq0', {
            height: '100%',
            width: '100%',
            videoId: a,
            playerVars: {
                'rel': 0,
                'showinfo': 0,
            },
            events: {
                // 'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });

        playerq1 = new YT.Player('playerq1', {
            height: '100%',
            width: '100%',
            videoId: b,
            playerVars: {
                'rel': 0,
                'showinfo': 0,
            },
            events: {
                // 'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });

        playerq2 = new YT.Player('playerq2', {
            height: '100%',
            width: '100%',
            videoId: c,
            playerVars: {
                'rel': 0,
                'showinfo': 0,
            },
            events: {
                // 'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }
    // 4. The API will call this function when the video player is ready.
    function onPlayerReady(event) {
        event.target.playVideo();
    }

    // 5. The API calls this function when the player's state changes.
    //    The function indicates that when playing a video (state=1),
    //    the player should play for six seconds and then stop.
    var done = false;

    function onPlayerStateChange(event) {

    }

    function stopVideo() {
        playerq0.stopVideo();
        playerq1.stopVideo();
        playerq2.stopVideo();
    }

    $('.myg').click(function (e) {
        $('.vi_box').css('display', 'none');
        stopVideo();
    })
    $('.myg').click(function (e) {
        $('.vi_box').css('display', 'none');
        stopVideo();
    })
</script>