Как данный скрипт переделать чтобы он работал для всех блоков?

Question

[Владимир]

добрый день! Нашел скрипт воспроизведение видео с ютуба, но он работает только с первым блоком. А у меня есть три блока и нужно чтобы по клику воспроизводил разные видео в своих блоках.

Вот у меня есть три блока и при клике на каждый блок должно воспроизводиться видео. Но воспроизводить только первый. Вот скрипт

<script >
 var handler = function () {this.innerHTML = '<iframe width="400" height="300" src="https://www.youtube.com/embed/GXFqyu0DkrU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'};
 document.querySelector('.video').addEventListener('click', function (e) { this.removeEventListener('click', handler, false); handler.apply(this, arguments); } , false);
             </script>

Comments

[Dymok]

гуглить про querySelectorAll

[Владимир]

Dymok, Пробовал querySelectorAll вместо querySelector . Не работает.

[Dymok]

Владимир, гуглить, а не просто поменять. Нужно еще и в цикле повесить обработчик на каждый. В прочем, снизу уже ответили

Answer 1

[dollar]

<script >
 var handler = function () {this.innerHTML = '<iframe width="400" height="300" src="https://www.youtube.com/embed/GXFqyu0DkrU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'};
 [...document.querySelectorAll('.video')].forEach(e=>e.addEventListener('click', function (e) { this.removeEventListener('click', handler, false); handler.apply(this, arguments); } , false));
             </script>

Comments

[Владимир]

Большое Вам спасибо