Как динамически добавлять на страницу youtube-плееры (iframe)?

Question

[polnyj0]

Приветствую. У меня стоит задача динамически, по срабатыванию определенных событий, добавлять на страницу iframe-ы с youtube-видео. Доки - https://developers.google.com/youtube/iframe_api_r... почитал, но один момент, для меня остался не ясен.
В примерах доступно показано как загрузить один iframe с видео - сначала в теге script загружается API:

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

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

По готовности загрузки выполняется функция onYouTubeIframeAPIReady(). Внутри этой функции и определяются настройки плеера.

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

Однако, позже может произойти другое событие, которое потребует создания нового iframe. Однако, как его создать - не ясно. Функция onYouTubeIframeAPIReady() выполняется единожды - по загрузке API, если попробовать создать новый экземпляр класса через new YT.Player - получаю сообщение в консоль о том, что YT не определен, что, видимо, свидетельствует о том, что определение YT.Player возможно только внутри функции onYouTubeIframeAPIReady(). Как же в этом случае добавить новый iframe с плеером? Ну не удалять же ранее загруженный script c youtube API, чтобы потом снова загрузить его и переопределить функцию onYouTubeIframeAPIReady().

Answer 1

[pitimirov_a]

Перед циклом

<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() {

Внутри цикла

<?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) ;

После цикла

}function onPlayerReady(event) {event.target.playVideo();this.id="pl";} function onPlayerStateChange(event) {if (event.data == YT.PlayerState.ENDED ) {  event.target.playVideo();}}</script>

Т.е. внутри функции onYouTubeIframeAPIReady() необходимо настраивать плееры, которые создаются динамически.