Problema com - PHP e JavaScript (Ajax) e API do YouTube

[Marcio Marins]

Estou tentando criar uma aplicação online com PHP e JavaScript (Ajax) e a API do YouTube. 

Basicamente, quero que os vídeos do meu canal rodem em uma "SECTION" da minha aplicação. 

Quando digito o código, previamente cadastrado em banco de dados com as informações do vídeo, e clico em um PLAY o vídeo é carregado na "SECTION" (id=player-on). Na primeira vez, o vídeo aparece e roda perfeitamente, mas se eu digitar outro código, o próximo vídeo não carrega. 

Tentei retirar  "window.addEventListener("load", (event) => {" do JavaScript e criar uma função e chamá-la diretamente no input "PLAY", mas também não funcionou.

Ou seja, eu teria que atualizar a pagina toda para poder rodar outro vídeo e isso não é interessante.

 

Alguém poderia ajudar?

 

PÁGINA QUE EU ESCOLHERIA VÍDEO: index.php

 

<script>
    window.addEventListener("load", (event) => {
        var botao = document.querySelector("#btn_cantar");
        var codigo_musica = document.querySelector("#codigo_musica");
        codigoLength = codigo_musica.value.length;
        botao.addEventListener("click", (event) => {
            if (codigoLength < 4) {
                $("#player-on").html("");
                console.log("menor");
            }
            if (codigoLength == 4) {
                primary = {
                    codigo: codigo_musica.value,
                };
                $.ajax({
                    type: 'post',
                    url: "player.php",
                    data: primary
                }).done(function(retorno) {
                    $("#player-on").html(retorno);
                });
            } else {
                alert("É necessário escolhe uma música!");
            }
        });
    });

    function buscaVideo(input) {
        codigoLength = input.value.length;
        primary = {
            codigo: input.value,
        };
        //SE O TAMANHO DO CODIGO FOR MENOR QUE 4 CARACTARES LIMPA O BOX  DE LISTAGEM DE MUSICAS
        if (codigoLength < 4) {
            $("#lista_videos").html("");
            console.log("menor");
        }
        //SE O TAMANHO DO CODIGO FOR = A 4 CARACTARES CARREGA A PAGINA DE LISTAGEM DE MUSICAS 
        if (codigoLength == 4) {
            $.ajax({
                type: 'post',
                url: "busca_videos.php",
                data: primary
            }).done(function(retorno) {
                $("#lista_videos").html(retorno);
            });
        }

    }
</script>
<section id="start" class="mx-auto py-5 col-2 float-start">
    <div class="row">
        <label class="col-12 text-center text-white fs-4 my-3">Enter with Code</label>
    </div>
    <div class="row">
        <div class="col-10 mx-auto text-center">
            <input id="codigo_musica" onkeyup="buscaVideo(this)" class="form-control text-center py-1 fs-4 border-5 rounded-5 " maxlength="4" type="text" id="codigo" value="" name="codigo" placeholder="Digite o código da música" autocomplete="off">
            <button id="btn_cantar" class="p-3 fs-4  btn btn-primary my-5 rounded-5" type="buttom">PLAY</button>
        </div>
    </div>
    <div class="row">
    <!-- SHOWS THE NAME OF THE CHOSEN VIDEO -->
        <div id="lista_videos" class="col-10 rounded-5 fs-3 bg-white mx-auto border-5 text-center p-2  text-center">
        </div>
    </div>
</section>
 <!-- SHOW THE CHOSEN VIDEO -->
<section id="player-on" class="col-10 float-end bg-primary">

</section>

PÁGINA QUE SERÁ CARREGADA:

  <div class="row">
        <div class="">
            <div id="player"></div>
        </div>
    </div>
    <script>
        (function() {
            var player;
            var height = window.screen.height;
            var width = window.screen.width;
            window.onYouTubeIframeAPIReady = function() {
                player = new YT.Player('player', {
                    height: height,
                    width: width,
                    videoId: '<?= $video["id_video"] ?>',
                    events: {
                        'onReady': onPlayerReady
                    },
                    playerVars: {
                        'playsinline': 1
                    },
                });

                // player.getPlayerState();
            };

            // 4. Executa o play quando o video estiver pronto
            function onPlayerReady(event) {
                event.target.playVideo();
            }
            var tag = document.createElement('script');
            tag.src = "https://www.youtube.com/iframe_api";
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
        })();
    </script>

 

LAYOUT BÁSICO:

Editado Maio 10 por Marcio Marins