Mutate videos within Slider with Youtube iframe API

Question

I have a bizarre situation going on.

I have a loop in PHP to consume database information and display on the page. One such piece of information is the ID of a Youtube video that I’d like to self-play and mute.

After beating my head too hard, I came to this code:

<?php include_once "common.php";?> <!-- dados de Conexão com o banco -->

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

<link href="css/slick.css" rel="stylesheet">
<script src="js/slick.min.js"></script>

<script src="https://www.youtube.com/iframe_api"></script>
<div style="margin-top: 0px;" class="bannerslider">
    <?php
        $sql = "SELECT * FROM banner ORDER BY pkcodebanner DESC LIMIT 5";
        $result = $conn->query($sql);
        $player = 0;
        $imagem = 0;
        if ($result->num_rows > 0) {

            while($row = $result->fetch_assoc()) {

                if($row['isvideo'] == 1){
                    echo '<iframe 
                            id="player'.$player.'"
                            class="yt-player"
                            width="999" 
                            height="370" 
                            src="https://www.youtube.com/embed/'.$row['video'].'?wmode=opaque&autohide=1&autoplay=1&enablejsapi=1&controls=0&rel=0&showinfo=0" 
                            frameborder="0" 
                            volume="0" 
                            allowfullscreen></iframe>';

                    $player++;
                } else {

                    echo '<div id="imagem'.$imagem.'" class="imgbanner" 
                    style="background-image: url(adm/CodeOutput/public/uploads/'.$row["imagem"].')"></div>';

                    $imagem++;
                };

            }
        } else {
            echo "Não há banners";
        }
        $conn->close();
    ?>
</div>

<style>
    .imgbanner{
        width: 999px;
        height: 370px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
</style>
<script>
    var players = document.getElementsByClassName("yt-player");
    var player;
    var pl = [];
    function onYouTubeIframeAPIReady() {
        for (i=0;i<players.length;i++){
            player = new YT.Player(players[i]['id'], {
                events: {
                    'onReady': onPlayerReady
                }
            });
            pl.push(player);

        }
        console.log(pl);
    }
    function onPlayerReady(event){
        for (i=0;i<players.length;i++){
            pl[i].mute();
        }
    }
</script>

This code works perfectly and can be seen working here

The thing is, I need to throw all this into a slider to make a rotary banner. I have no problem generating the slider using the Slick but, when I add Slick’s Starter to create the slider JS to mutate the videos to work.

$(document).ready(function() {
    $('.bannerslider').slick({
            infinite: true 
    }); 
});

Also after starting Slick, it creates 1 more iframe than the original. Without Slick, the.log(pl) console returns 1 array with 2 objects. When Slick is active console.log(pl) returns 1 array with 3 objects. I imagine he would create one more object anyway but, as iframe is the first on the list, it duplicates the record.

Would anyone have any idea how I can resolve this situation?