Untitled

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="UTF-8">
        <title>Youtube Remote</title>
        <script src="https://www.youtube.com/iframe_api"></script>
        <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    </head>
          <body style="margin: 0; display: flex;">
                <div id="player" ></div>
                <script type="text/javascript">
                    var player;
                    var cue = ['Xm8UTv6LSf0','Q2IaKsHFjr8','NFB6Y2Qt8ag'];
                    var previousIndex = 0;
                    function onYouTubeIframeAPIReady() {
                        player = new YT.Player('player',{
                            height: $(window).height(),
                            width: $(window).width(),
                            playerVars: {
                                playlist: cue.join(','),
                                listType: 'playlist',
                                color: "white",
                                controls: 2,
                                enablejsapi: 1,
                                fs: 0,
                            },
                            events: {
                                onStateChange: function (event) {
                                   if (event.data == -1 || event.data == 0) {
                                       console.log("\n\n\n\n\n\n\n\n\n\n\n\n\n\nPlayer finished");        <-- Debug
                                       var index = player.getPlaylistIndex();
                                       if (player.getPlaylist().length != cue.length) {
                                           player.loadPlaylist(cue, previousIndex + 1);
                                       }
                                       previousIndex = index;
                                   }
                               }
                           }
                        });
                    }

                    var s = new WebSocket("ws://" + window.location.host + ":80/socket");

                    s.onopen = function (data) {s.send("[SERVER]")};
                    s.onclose = function (data) {  };
                    s.onmessage = function (data) {
                        var msg = data.data;
                        if(msg.substr(0,"[QUEUE]".length) == "[QUEUE]"){
                            msg = msg.substr("[QUEUE]".length);
                            console.log(msg);
                            if(msg.indexOf(",") > -1) {
                                for (var x in msg.split(",")) {
                                    cue.push(x);
                                }
                            } else {
                                cue.push(msg);
                            }

                        } else if(msg.substr(0,"[PLAY]".length) == "[PLAY]"){
                            player.playVideo();
                        } else if(msg.substr(0,"[PAUSE]".length) == "[PAUSE]"){
                            player.pauseVideo();
                        } else if(msg.substr(0,"[NEXT]".length) == "[NEXT]"){
                            player.nextVideo();
                        } else if(msg.substr(0,"[PREV]".length) == "[PREV]"){
                            player.previousVideo();
                        }
                    };
                </script>
     </body>
</html>