Video pop-up on button click for multiple videos on page using jQuery/Javascript-CodePudding

I'm looking to integrate multiple embedded youtube videos (using Iframe's) that pop up on the screen after a user clicks a custom button.

There are a lot of similar questions that work for one video, but not multiple videos on the same page.

The button is nested within a set of div's uniform across all the videos. After the video pop's up, clicking outside of the video should make it disappear.

The below code finds the parent element after the button is clicked and should open that specific video modal, but instead, nothing happens.

Any help is much appreciated!

var btns = document.getElementsByClassName("watchbutton");

var openVideo = function() {
  var card = $(this).closest('.card');
  var modal = $(this).closest('.trailerdivbox');
  var trailerbox = $(this).closest("close");
  modal.css('display', 'block');

  trailerbox.onclick = function() {
    modal.css('display', 'none');
    // When the user clicks anywhere outside of the modal, close it
  }
  window.onclick = function(event) {
    if (event.target == modal) {
      modal.css('display', 'none');
    }
  }

};

for (var i = 0; i < btns.length; i  ) {
  btns[i].addEventListener('click', openVideo, false);


}

/* Watch Trailer Button CSS */

.watchbutton {
  background-color: #f2f2f2;
  color: red;
  font-weight: 600;
  border: none;
  padding: 10px 12px;
}

.watchbutton:hover {
  background-color: #e2e2e2;
  cursor: pointer;
}

.trailerdivbox {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  overflow: auto;
  /* Enable Scrolling */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  max-width: 560px;
  max-height: 315px;
  width: 95%;
  height: 95%;
  left: 0;
  right: 0;
  margin: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='videos'>

  <div class='card'>
    <button class="watchbutton">Watch Trailer &#9658</button>
    <div class="close">
      <div class="trailerdivbox">
        <div class="videoWrapper">
          <iframe class="trailervideo" width="560" height="315" src="https://www.youtube.com/embed/TDwJDRbSYbw" frameborder="0" allowfullscreen>
          </iframe>
        </div>
      </div>
    </div>

  </div>

  <div class='card'>
    <button class="watchbutton">Watch Trailer &#9658</button>
    <div class="close">
      <div class="trailerdivbox">
        <div class="videoWrapper">
          <iframe class="trailervideo" width="560" height="315" src="https://www.youtube.com/embed/TDwJDRbSYbw" frameborder="0" allowfullscreen>
          </iframe>
        </div>
      </div>
    </div>

  </div>

CodePudding user response：

First off, your modal and trailerbox are not defined correctly. They are offspring of a sibling of the button so .closest() will not find them.

For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

It tests itself, then the parent, so it will not encounter those elements. You need to use .find() from the parent.

var modal = $(this).closest('.card').find('.trailerdivbox');

Consider the following example.

$(function() {
  function openVideo(event) {
    var card = $(this).closest(".card");
    var modal = $(".trailerdivbox", card);
    modal.addClass("isOpen").show();
  }

  function closeVideo(event) {
    var modal = $(".trailerdivbox.isOpen");
    modal.removeClass("isOpen").hide();
  }
  
  $(".videos").on("click", ".watchbutton", openVideo);
  $(".videos").on("click", ".close", closeVideo);
  
});

/* Watch Trailer Button CSS */

.watchbutton {
  background-color: #f2f2f2;
  color: red;
  font-weight: 600;
  border: none;
  padding: 10px 12px;
}

.watchbutton:hover {
  background-color: #e2e2e2;
  cursor: pointer;
}

.trailerdivbox {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  overflow: auto;
  /* Enable Scrolling */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  max-width: 560px;
  max-height: 315px;
  width: 95%;
  height: 95%;
  left: 0;
  right: 0;
  margin: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='videos'>
  <div class='card'>
    <button class="watchbutton">Watch Trailer &#9658</button>
    <div class="close">
      <div class="trailerdivbox">
        <div class="videoWrapper">
          <iframe class="trailervideo" width="560" height="315" src="https://www.youtube.com/embed/TDwJDRbSYbw" frameborder="0" allowfullscreen>
          </iframe>
        </div>
      </div>
    </div>
  </div>
  <div class='card'>
    <button class="watchbutton">Watch Trailer &#9658</button>
    <div class="close">
      <div class="trailerdivbox">
        <div class="videoWrapper">
          <iframe class="trailervideo" width="560" height="315" src="https://www.youtube.com/embed/TDwJDRbSYbw" frameborder="0" allowfullscreen>
          </iframe>
        </div>
      </div>
    </div>
  </div>
</div>