Блог

Главная - Вопросы по программированию - Остановите видео на YouTube При закрытии Модального и Закройте Модальный При нажатии За пределами Div

Остановите видео на YouTube При закрытии Модального и Закройте Модальный При нажатии За пределами Div

#javascript #jquery

Вопрос:

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

Ниже показано, как я открываю и закрываю модал. Есть идеи, как я могу остановить видео на YouTube, когда модал закрыт, а также закрыть модал при нажатии за пределами div?

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

 var modalparent = document.getElementsByClassName("video-modal");
var modal_btn_multi = document.getElementsByClassName("video-thumbnail");
var span_close_multi = document.getElementsByClassName("video-modal-close");

function setDataIndex() {

  for (i = 0; i < modal_btn_multi.length; i  ) {
    modal_btn_multi[i].setAttribute('data-index', i);
    modalparent[i].setAttribute('data-index', i);
    span_close_multi[i].setAttribute('data-index', i);
  }
}

for (i = 0; i < modal_btn_multi.length; i  ) {
  modal_btn_multi[i].onclick = function() {
    var ElementIndex = this.getAttribute('data-index');
    modalparent[ElementIndex].style.display = "inline-block";
  };
  span_close_multi[i].onclick = function() {
    var ElementIndex = this.getAttribute('data-index');
    modalparent[ElementIndex].style.display = "none";
  };
}

window.onload = function() {
  setDataIndex();
};

window.onclick = function(event) {
  if (event.target === modalparent[event.target.getAttribute('data-index')]) {
    modalparent[event.target.getAttribute('data-index')].style.display = "none";
  }
}; 
 .video-modal {
  max-width: 850px;
  max-height: 90%;
  text-align: left;
  background: transparent;
  padding: 20px;
  margin: 0 auto;
  position: fixed;
  left: 2%;
  right: 2%;
  z-index: 1001;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  font-size: 0;
}

.video-modal-show {
  width: 100%;
  max-width: 1240px;
  padding: 0;
  margin: 0 auto;
  position: relative;
}

.video-modal-wrap {
  width: 100%;
  position: relative;
  display: inline-block;
  margin: 0;
  font-size: 0;
}

.video-modal-close {
  width: 26px;
  height: 26px;
  background: #888;
  position: fixed;
  top: 7px;
  right: 7px;
  font-size: 15px;
  line-height: 26px;
  text-align: center;
  text-transform: uppercase;
  margin: 0;
  color: #fff;
  z-index: 999999999999;
  border-radius: 13px;
} 
 <div class="video-thumbnail">Open Modal</div>
<div class="video-modal" style="display: none;">
  <div class="video-modal-close">x</div>
  <div class="video-modal-content">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/lesTkxvcSFw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</div>

Комментарии:

1. Чтобы обрабатывать видео с YouTube, вам необходимо использовать API YouTube developers.google.com/youtube/v3 Затем вы создаете метод, возможно, называемый «closeModal», в котором сначала вызываете функцию паузы видео, а затем показываете ни один из ваших модальных.

Метки: