Почему открываются разные pop-up а в них одно и тоже видео?

Question

[Стас]

Хэлп гайз!
Я написал скрипт (содрал с другого сайта и адаптировал) который открывает скрытые дивы в которых лежат разные видео.
Но трабл в том что поп ап открывается и в нем каким то образом подменяется видео и получается во всех модалках один и тот же видос.
Вот сайт http://alexkomarov.com
В разделе "Выбери свой курс" при нажатии "пример урока" в первых 3 блоках действительно вызывается одно и тоже видео.
Но вот разовое занятие и укулеле, в них разные видео.
Вообщем кто что знает по этому поводу. Помогите пожалуйста.

Comments

[RaulDuke]

Ковыряться в инспекторе удовольствие сильно на любителя, Вы бы хоть кусок кода выложили.
Если без погружения, то у Вас все клики вызывают одну и туже модалку, автором скрипта (который Вы "адоптировали") задумано, что src в Iframe модал-окне должен заменяться на какой-то url. Но я не вижу где вы передаете какой-либо url.

var link1 = document.querySelector(".js-open-video1");
    var popup1 = document.querySelector(".theory-video");
    link1.addEventListener("click", function(event) {
        event.preventDefault();
        popup1.classList.add("modal-content-show");
        popupback.classList.add("modal-content-show");
       $('iframe').attr('src', url);
      });
    
          var close = popup1.querySelector(".close-video");
    close.addEventListener("click", function(event) {
        event.preventDefault();
        popup1.classList.remove("modal-content-show");
        popupback.classList.remove("modal-content-show");
       $('iframe').attr('src', '');
      });
        
    var link2 = document.querySelector(".js-open-video2");
    var popup2 = document.querySelector(".theory-video");
          link2.addEventListener("click", function(event) {
        event.preventDefault();
        popup2.classList.add("modal-content-show");
        popupback.classList.add("modal-content-show");
       $('iframe').attr('src', url);
      });
    
          var close = popup2.querySelector(".close-video");
    close.addEventListener("click", function(event) {
        event.preventDefault();
        popup2.classList.remove("modal-content-show");
        popupback.classList.remove("modal-content-show");
       $('iframe').attr('src', '');
      });
        
        
     var link3 = document.querySelector(".js-open-video3");
     var popup3 = document.querySelector(".theory-video");
          link3.addEventListener("click", function(event) {
        event.preventDefault();
        popup3.classList.add("modal-content-show");
        popupback.classList.add("modal-content-show");
       $('iframe').attr('src', url);
      });
    
          var close = popup3.querySelector(".close-video");
    close.addEventListener("click", function(event) {
        event.preventDefault();
        popup3.classList.remove("modal-content-show");
        popupback.classList.remove("modal-content-show");
       $('iframe').attr('src', '');
      });

<div class="theory-video modal-video">
        <button class="close-video" type="button" title="Закрыть">
            Закрыть
        </button>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/stPuOb-i_nU" frameborder="0" allowfullscreen></iframe>
    </div>

Answer 1

[Павел Голубков]

У вас в разметке в каждом попапе одно и тоже видео, поменяйте в разметке ссылки и будет всё ок.

Comments

[Павел Голубков]

И вообще на первые 3 ссылки открывается один и тот же попап

[Стас]

Да на первые три ссылки открывается один поп ап, я писал об это выше. Это для того что бы заказчик видел что все работает. Но у него нет видосов еще что бы подставить под те ссылки.

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

[Stalker_RED]

Стас: Так и должно быть?

А слабо не копипастить, а написать одни обработчик для всех?

[Стас]

Stalker_RED: Да первые три .js-open-video открывают один и тот же видос.
Пытаюсь сам, но сильно мало шарю.