How to pause the current youtube video on click and start the next one?

Question

YouTube

Friends, please explain how to click on the link to pause the current video and start the next one?
It turned out only to pause the current one, but I can’t figure out how to start the next one?

Here is a simple example:

<div class="video">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/f7Ir5icRsZ0?autoplay=1&amp;rel=0&amp;enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

  <iframe width="560" height="315" src="https://www.youtube.com/embed/f7Ir5icRsZ0?rel=0&amp;enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>

  <a href="#" class="play">следующее</a>

$(document).on('click', '.play', function(){ 
    $(".video iframe").each(function() {
        $(this)[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');

  //$(this)[1].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
  //$(this).next("iframe")[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');

      });
    });

And here is the same on codepin raised https://codepen.io/Cheizer/pen/OQBPWj

commented out code in js causes errors, it doesn't work, pamagitii!!

Answer 1

What a strange selection you have, well, it seems to work like that .