How to rewrite the video launch script if there are several videos on the page?

• 0
  I have a section that displays a video with a placeholder image (second__mock-video) and a play button (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>

  
  
  Script to launch video
  

  (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);
          }
      }
  
  })();

  
  
  The problem is the script only works for the first video. If there are more on the page, then they are not launched.

  JavaScript Micah Higgins, Dec 30, 2018

---

1 Answers
• 0
  
  
  1. Instead of an anonymous function, use the named function
     
  
  
  2. Add an argument called sectionSecond
     
  
  
  3. Call the function any number of times and pass the container with your video to it - one call for each video
     
  
  

  Noah Lowery

---