How to dynamically add youtube players (iframe) to the page?

Question

YouTube

Greetings. I have a task to dynamically, by triggering certain events, add iframes with youtube videos to the page. Docks - https://developers.google.com/youtube/iframe_api_r... I read it, but one thing was not clear to me.
The examples clearly show how to load a single iframe with a video - first, the API is loaded in the script tag:

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

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

When the download is ready, the onYouTubeIframeAPIReady() function is executed. Inside this function, the player settings are determined.

function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

However, another event may occur later that will require the creation of a new iframe. However, how to create it is not clear. The onYouTubeIframeAPIReady() function is executed once - upon loading the API, if you try to create a new instance of the class through new YT.Player - I get a message in the console that YT is not defined, which apparently indicates that the definition of YT.Player is only possible inside the onYouTubeIframeAPIReady() function. How in this case to add a new iframe with a player? Well, do not delete the previously loaded script from the youtube API, so that later you can load it again and override the onYouTubeIframeAPIReady() function.

Answer 1

Before cycle

<div id="ytmain"></div>
<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 player = [];
function onYouTubeIframeAPIReady() {

Inside the loop

<?php if(!isset($lal)){$lal=0;}else{$lal++;}?>
player[<?php print $lal;?>] = new YT.Player('player<?php print $lal;?>', {
    
          height: '494', // Высота
          width: '878', // Ширина
          videoId: "<?php print $video['popup'];?>", /* kaR07DuN2T8 */ // ID видео

  playerVars: { 'autoplay': 1, 'loop': 1},events: {'onReady': onPlayerReady,'onStateChange': onPlayerStateChange}});
                          
var new_input = document.createElement("div") ;

 new_input.id = "player<?php print $lal;?>" ;

 document.getElementById("ytmain").appendChild(new_input) ;

After cycle
Those. inside the onYouTubeIframeAPIReady() function, you need to configure players that are created dynamically.