Блог

Главная - Вопросы по программированию - Всплывающее окно видео при нажатии кнопки для нескольких видео на странице с использованием jQuery/Javascript

Всплывающее окно видео при нажатии кнопки для нескольких видео на странице с использованием jQuery/Javascript

#javascript #html #jquery #css

Вопрос:

Я хочу интегрировать несколько встроенных видеороликов YouTube (с использованием Iframe), которые появляются на экране после того, как пользователь нажимает пользовательскую кнопку.

Есть много похожих вопросов, которые работают для одного видео, но не для нескольких видео на одной странице.

Кнопка вложена в набор форм div для всех видео. После того, как всплывающее видео появится, щелчок за пределами видео должен заставить его исчезнуть.

Приведенный ниже код находит родительский элемент после нажатия кнопки и должен открыть этот конкретный видеорежим, но вместо этого ничего не происходит.

Любая помощь будет очень признательна!

 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 amp;#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 amp;#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>

Ответ №1:

Во-первых, ваши modal и trailerbox не определены правильно. Они являются потомками родного брата кнопки, поэтому .closest() их не найдут.

Для каждого элемента в наборе получите первый элемент, соответствующий селектору, проверив сам элемент и пройдя через его предков в дереве DOM.

Он проверяет себя, затем родителя, поэтому он не столкнется с этими элементами. Вам нужно использовать .find() от родителя.

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

Рассмотрим следующий пример.

 $(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 amp;#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 amp;#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>
Метки: