我希望集成多个嵌入式youtube视频（使用iFrame的），这些视频在用户单击自定义按钮后会弹出屏幕。

有许多类似的问题适用于一个视频，但不能在同一页面上使用多个视频。

按钮嵌套在所有视频的一套DIV制服中。在视频弹出后，单击视频外面应该会使其消失。

下面的代码在单击按钮后找到父元素，并应该打开特定的视频模式，但什么也没有发生。

非常感谢您的帮助！

顺晟科技：

首先，您的and定义不正确。它们是按钮的兄弟姐妹的后代，因此找不到它们。

对于集合中的每个元素，通过测试元素本身并遍历其在DOM树中的祖先，获得与选择器匹配的第一个元素。

它测试自己，然后测试父级，所以它不会遇到这些元素。您需要从父级使用。

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


}

考虑以下示例。