Как переписать скрипт запуска видео, если на странице несколько видео?

Question

[karelina-nat]

У меня есть секция на которой выводится видео с изображением-заглушкой (second__mock-video) и кнопкой play (second__play).

<section class="second">
    <div class="bg__fon"></div>
    <div class="second__wrapper container">
        <div class="row">
                <div class="second__desc swiper-is-hide col-4-md offset-1-md">
                    <h2 class="second__title title">
                        <span>
                            Лучшие мгновения сезона 2020
                        </span>
                    </h2>
                    <a href="" class="btn btn--yellow second__btn second__btn--with-title">
                        <span>
                            О курорте
                        </span>
                    </a>
                </div>
                <div class="second__show-demo col-7-md col-10-xs offset-0-md offset-1-xs">
                    <div class="second__wrapper-video">
                        <video class="second__video hidden" src="video.mp4"></video>
                        <div class="second__mock-video"></div>
                        <button class="second__play"></button>
                    </div>
                </div>
        </div>
    </div>
</section>

Скрипт для запуска видео

(function () {

    var sectionSecond = document.querySelector('.second');

    if (sectionSecond) {
        var buttonPlay = sectionSecond.querySelector('.second__play');
        var videoShowDemo = sectionSecond.querySelector('.second__video');

        if (videoShowDemo) {
            var videoMock = sectionSecond.querySelector('.second__mock-video');

            var onButtonPlayClick = function (evt) {
                evt.preventDefault;

                buttonPlay.classList.add('hidden');
                videoMock.classList.add('hidden');
                videoShowDemo.classList.remove('hidden');

                videoShowDemo.play();
                videoShowDemo.setAttribute('controls', 'true');
            };

            var onVideoEnded = function () {
                buttonPlay.classList.remove('hidden');
                videoMock.classList.remove('hidden');
                videoShowDemo.classList.add('hidden');
                videoShowDemo.removeAttribute('controls');
            };

            buttonPlay.addEventListener('click', onButtonPlayClick);
            videoShowDemo.addEventListener('ended', onVideoEnded);
        }
    }

})();

Проблема в том, что скрипт работает, только для первого видео. Если на странице присутствуют еще, то они не запускаются.

Answer 1

[Alex]

1. Вместо анонимной функции используйте именованую
   
2. Добавьте в неё аргумент с названием sectionSecond
   
3. Вызывайте функцию любое количество раз и передавайте в неё контейнер с вашим видео -- один вызов для каждого видео