彈出模式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(); 
    }); 
});