Как в youtube API привязать кнопку к каждому видео?

Question

[Саша]

Здравствуйте.
Подкидываю на сайт видео через ютуб апи, видео более одного, стараюсь реализовать динамическую инициализацию.
У каждого видео есть своя кнопка "Играть" и "Пауза".
Проблема состоит в том, что при клике на любую из кнопок "Играть" начинают играть все видео, а должно лишь то, которое находиться в одном родителе с кнопкой.
Подскажите пожалуйста, где в коде ошибка и как поправить, спасибо!

код на codepen

Answer 1

[Ridz]

function onYouTubeIframeAPIReady(){

    $('.player').each(function(){
      var playerId = $(this).attr('id');
      var videoId = $(this).data('video');
      var player;
      var parent = $(this).parent();
      player = new YT.Player(playerId, {
        height: '360',
        width: '640',
        videoId: videoId,
        events: {
          'onReady': onPlayerReady.bind(parent),
          'onStateChange': onPlayerStateChange
        },
        playerVars: {
          showinfo:0,
          // iv_load_policy:3,
          rel:0
          // controls:0
        }
      });
    });

  }

  function onPlayerReady(event){
    var target = event.target;
    $('.play',this).click(function(){
      target.playVideo();
      $('body').addClass('v-play');
    })
    $('.pause', this).click(function(){
      target.pauseVideo();
      $('.v-play').removeClass('v-play');
    })
    //event.target.stopVideo();
  }

  function onPlayerStateChange(event){
    var status = event.target.getPlayerState();
    if(status == 0){
      $('.v-play').removeClass('v-play');
    }
  }

Comments

[Саша]

Ridz спасибо, помогло!