Как по клику поставить на паузу текущее видео с youtube и запустить следующее?

Question

[Cheizer]

Друзья, объясните пожалуйста, как по клику на ссылке поставить на паузу текущее видео, и запустить следующее?
Получилось только поставить на паузу текущее, но не могу понять как запустить следующее?

Вот пример простой:

<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":""}', '*');

      });
    });

И вот то же самое на codepin поднял https://codepen.io/Cheizer/pen/OQBPWj

закомментированный код в js вызывает ошибки, это не работает, памагитиии!!

Answer 1

[twobomb]

Чето странная у вас выборка, ну так вроде работает.

Comments

[Cheizer]

Хм, спасибо! А почему с each не работает? Должно же.

[twobomb]

Роман Кузнецов, Each перебирает массив из 2x iframe. This это текущий iframe на текущей итерации, тоесть на первой this это первый iframe с первым видео, на второй это со вторым. $(this)[0]? это что? обращение к нулевому элементу массива, с чего бы this это массив? Даже если это убрать и оставить $(this).contentWindow... он сначала остановит 2 видео, а потом запустит 2. Если хотите с each то сделайте проверку что если на текущей итерации работаем первым фреймом стоп, со вторым плей...

[Cheizer]

twobomb, Спасибо! Понятно теперь. А если children использовать, то как будет наоборот? Как предыдущее запустить видео?

[twobomb]

Роман Кузнецов, Чтобы запустить предыдущие поменяйте 0 на 1, 1 на 0. И тогда второе остановится, а первое запустится типа такого

$(".video").children()[1].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');

  $(".video").children()[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');