Muting videos within Slider with Youtube iFrame API

I'm having a bizarre situation going on.

I have a PHP loop to consume database information and display on the page. One of these information is the ID of a Youtube video that I would like to display with autoplay and mute.

After a lot of headaches, I came up with 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><linkhref="css/slick.css" rel="stylesheet">
<script src="js/slick.min.js"></script>

<script src="https://www.youtube.com/iframe_api"></script><divstyle="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

What's up is that I need to play this all inside a slider to make a rotating banner. I have no problem generating the slider using Slick but when I add the slick starter to create the slider the JS to mutate the videos stop working.

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

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

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