Как передать конкретный идентификатор во встроенный проигрыватель YouTube?

Question

РЕДАКТИРОВАТЬ: я придумал лучшее решение. Во время цикла while я передаю идентификатор в качестве аргумента onclick функция. НО, теперь, когда я нажимаю любой из DIV ничего не происходит Можете ли вы сказать, где проблема? Спасибо за помощь.

Я столкнулся с проблемой. Я пытаюсь реализовать трейлеры. Пользователь может наблюдать за ними, щелкая элемент div, который должен вести себя как кнопка, используя javascript / jQuery. Проблема в том, что я хочу иметь только одну встроенную игру, поэтому мне не нужно многократно повторять код. Но я не могу понять, как заставить игрока играть трейлер фильмов, на кнопку которых только что нажали. Ниже приведен код и под ним краткое изложение моего запроса. Спасибо за прочтение.

//Trailer links that got generated with a loop..
//EDIT: DIVs now contain the id as an attribute to a onClick function
<div class="trailer" onclick="playTrailer(M7lc1UVf-VE)">
    <p>WATCH TRAILER</p>
</div>

<div class="trailer" onclick="playTrailer(ksfj34ln-Xe)">
    <p>WATCH TRAILER</p>
</div>

<div class="trailer" onclick="playTrailer(rasdasdl-Xe)">
    <p>WATCH TRAILER</p>
</div>

//EDIT: added hidden DIV that should be displayed when the DIVs are clicked
<div id="trailer-box" style="display: none;">

    //EDIT: the play is now within the hidden DIV
    <div id="ytplayer"></div>

</div>

<script>
  function showMovie(id){
      $('.trailer-box').toggle(); //EDIT: newly added

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

      var player;
      function onYouTubePlayerAPIReady() {
        player = new YT.Player('ytplayer', {
          height: '390',
          width: '640',
          videoId: id
        });
      }
  }
</script>

Я хотел бы знать, есть ли способ для меня получить значение DIV как только он нажал и передать его в сценарий videoId поле. Если кто-нибудь из вас знает, как это можно сделать, даже если это потребует дополнительных настроек, скажите мне. Большое спасибо за чтение и за ваши ответы.

Answer 1

Похоже, вы не используете jQuery, поэтому:

Вместо этого вы должны использовать атрибуты данных:

<div data-id="M7lc1UVf-VE" class="watch">
    <p>WATCH TRAILER for movie A</p>
</div>

Затем:

var nodeList = document.querySelectorAll('.watch');

for (var i = 0; i < nodeList.length; i++) {
    nodeList[i].addEventListener('click', 
                    function(e){
                      showMovie(e.target.parentElement.getAttribute("data-id"));
                    }, 
                    false);
}

function showMovie(id){
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
      height: '390',
      width: '640',
      videoId: id
    });
  }
}

Answer 2

Должно быть что-то вроде

$('.watch').click (function (){
    player.loadVideoById($(this).attr ('id'));
});

пример

больше информации