弹出模式jquery播放现有的嵌入式YouTube视频时，试图播放另一个

Question

我试图做一个嵌入式视频播放，但是当我做他们都在同一时间播放。我花了两天试图解决这个问题，但无济于事。 有人可以帮忙，我的编码经验有限。

下面是代码：

HTML：

<div class="play"><a data-popup-open="popup-1" href="#"></a></div> 

<div class="popup" data-popup="popup-1"> 
<div class="popup-inner"> 

    <iframe id="video" width="854" height="480" frameborder="0" allowfullscreen></iframe> 

    <a class="popup-close" data-popup-close="popup-1" href="#">x</a> 
</div> 



<div class="play"><a data-popup-open="popup-2" href="#"></a></div> 

<div class="popup" data-popup="popup-2"> 
<div class="popup-inner"> 

    <iframe id="video2" width="854" height="480" frameborder="0" allowfullscreen></iframe> 

    <a class="popup-close" data-popup-close="popup-2" href="#">x</a> 
</div> 

CSS：

.popup { 
width: 100%; 
height: 100%; 
display: none; 
position: fixed; 
top: 0px; 
left: 0px; 
background: rgba(0,0,0,0.75); 
z-index: 999; 

} 


.popup-inner { 
max-width: 854px; 
width: 90%; 
padding: 0px; 
position: fixed; 
top: 53%; 
left: 50%; 
-webkit-transform: translate(-50%, -50%); 
transform: translate(-50%, -50%); 
height: auto; 
min-width: 854px; 

} 

iframe { 
border: 1px solid #151515); 
border-radius: 7px !important; 
z-index: 12; 
} 



.popup-close { 
position: absolute; 
width: 28px; 
height: 28px; 
padding-top: 4px; 
padding-right: 2px; 
padding-left: 2px; 
display: inline-block; 
position: absolute; 
top: 0px; 
right: -8px; 
transition: ease 0.25s all; 
-webkit-transform: translate(50%, -50%); 
transform: translate(50%, -50%); 
border-radius: 1000px; 
background: rgba(0,0,0,0.8); 
font-family: Arial, Sans-Serif; 
font-size: 20px; 
text-align: center; 
line-height: 100%; 
color: #fff; 
z-index:13; 
} 

JAVASCRIPT

$(function() { 
//----- OPEN 
$('[data-popup-open]').on('click', function(e) { 
    var targeted_popup_class = jQuery(this).attr('data-popup-open'); 

     $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350); 


$("#video").attr('src','https://www.youtube.com/embed/mz8qGSaPvI8'); 
$("#video")[0].src += "?autoplay=1&modestbranding=1"; 



$("#video2").attr('src','https://www.youtube.com/embed/mz8qGSaPvI8'); 
$("#video2")[0].src += "?autoplay=1&modestbranding=1"; 

    e.preventDefault(); 
}); 

//----- CLOSE 
$('[data-popup-close]').on('click', function(e) { 
    var targeted_popup_class = jQuery(this).attr('data-popup-close'); 

    $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350); 

$("#video, #video2").attr('src',''); 

    e.preventDefault(); 
}); 
}); 

Answer 1

解决，它不漂亮，但工作。希望这有助于某人。我把自动播放1放在一个单独的点击功能上，如下所示。 n.b我还没有改变video2，但你会在#video上看到修正。

$(function() { 
//----- OPEN 
$('[data-popup-open]').on('click', function(e) { 
    var targeted_popup_class = jQuery(this).attr('data-popup-open'); 

     $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350); 

//-----1st start  
$("#video").attr('src','https://www.youtube.com/embed/mz8qGSaPvI8'); 
$(".play").click(function() { 
$("#video")[0].src += "?autoplay=1&modestbranding=1"; 
}); 

//-----1st end 

$("#video2").attr('src','https://www.youtube.com/embed/mz8qGSaPvI8'); 
$("#video2")[0].src += "?modestbranding=1"; 
    e.preventDefault(); 
}); 

//----- CLOSE 
$('[data-popup-close]').on('click', function(e) { 
    var targeted_popup_class = jQuery(this).attr('data-popup-close'); 

    $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350); 
//-----1st start  
$("#video, #video2").attr('src',''); 
//-----1st end 
    e.preventDefault(); 
}); 
}); 

Answer 2

我无法重现您所描述的内容，但会尽我所能提供一些帮助。正如你在答案中所说的，自动播放似乎是问题，假设自动播放是视频播放的原因。无论点击哪个弹出框，这两个视频标签的src都会设置自动播放属性，这将始终使两个视频都能播放。

本质上，我们想要实现的是将src设置为具有弹出类和给定[data-popup]属性的div的子元素，因此我们需要找到该子标记。解决这个问题的一个办法是使用jQuery查找方法，它将使用给定的选择器来定位子节点。在我们的情况下，这将是iframe标签。

$(function() { 
    //----- OPEN 
    $('[data-popup-open]').on('click', function(e) { 
     var targeted_popup_class = jQuery(this).attr('data-popup-open'); 

     $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350); 

     targeted_popup_class.find('iframe').attr('src','https://www.youtube.com/embed/mz8qGSaPvI8'); 
     targeted_popup_class.find('iframe').src += "?autoplay=1&modestbranding=1"; 

     e.preventDefault(); 
    }); 

    //----- CLOSE 
    $('[data-popup-close]').on('click', function(e) { 
     var targeted_popup_class = jQuery(this).attr('data-popup-close'); 

     $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350); 

     targeted_popup_class.find('iframe').attr('src',''); 
      e.preventDefault(); 
    }); 
});