bootstrap video modal pop-up

Question

Birbirinin modal ile yan yana yerleştirilmiş 3 görüntü içeren bir video modal oluşturmak için çalışıyor .. bu resimlerin üzerine bir video modal pops up.so i JavaScript 3 farklı ids oluşturuldu tıklayarak 3 farklı video açılacak .. ama sorun ilk iki video oynatabiliyorum ama üçüncü oyun oynamaz.çinci görüntü tıklandığında ilk video.just bireysel videoları oynayamaz click tek tek images.how düzeltmek için onu düzeltin muyum?

<script> 
$(document).ready(function(){ 
$("#myBtn").click(function(){ 
$("#myModal").modal({backdrop: false}); 
}); 

$("#myBtn1").click(function(){ 
$("#myModal1").modal({backdrop: false}); 
}); 

$("#myBtn2").click(function(){ 
$("#myModal2").modal({backdrop: false}); 
}); 

}); 
</script> 

<div class="container"> 
<a href="#" data-toggle="modal"><img id="myBtn" src="images/video1.png"> 
</a> 
<a href="#" data-toggle="modal"><img id="myBtn1" src="images/video1.png"> 
</a> 
<a href="#" data-toggle="modal"><img id="myBtn2" src="images/video1.png"> 
</a> 
<!-- Modal --> 
<div id="myModal" class="modal fade"> 
<div class="modal-dialog"> 
<div class="modal-content"> 
<div class="modal-body"> 
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button> 
<iframe class="size" src="https://www.youtube.com/embed/PD0Yd0l3-0I?autoplay=1";frameborder="0" allowfullscreen></iframe> 
</div> 
</div> 
</div> 
</div> 
<div id="myModal1" class="modal fade"> 
<div class="modal-dialog"> 
<div class="modal-content"> 
<div class="modal-body"> 
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button> 
<iframe class="size" src="https://www.youtube.com/embed/Jiji_1iosv4?autoplay=1" ;frameborder="0" allowfullscreen></iframe> 
</div> 
</div> 
</div> 
</div> 
<div id="myModal2" class="modal fade"> 
<div class="modal-dialog"> 
<div class="modal-content"> 
<div class="modal-body"> 
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button> 
<iframe class="size" src="https://www.youtube.com/embed/y8gvEtmay9M?autoplay=1" ;frameborder="0" allowfullscreen></iframe> 
</div> 
</div> 
</div> 
</div> 
</div> 

Answer 1

Modelleri açmak için Javascript gerekmez. HTML etiketlerini kullanabilirsiniz. Ancak, JavaScript ile oynatmayı (yakın durma vb.) Yönetmeniz gerekir. İşte

<div class="container"> 
<a href="#myModal" data-backdrop="static" data-toggle="modal"><img id="myBtn" src="images/video1.png"> 
</a> 
<a href="#myModal1" data-backdrop="static" data-toggle="modal"><img id="myBtn1" src="images/video1.png"> 
</a> 
<a href="#myModal2" data-backdrop="static" data-toggle="modal"><img id="myBtn2" src="images/video1.png"> 
</a> 
<!-- Modal --> 
<div id="myModal" class="modal fade"> 
<div class="modal-dialog"> 
<div class="modal-content"> 
<div class="modal-body"> 
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button> 
<iframe class="size" src="https://www.youtube.com/embed/rFuEu3dj-nA?autoplay=1" ;frameborder="0" allowfullscreen></iframe> 
</div> 
</div> 
</div> 
</div> 
<div id="myModal1" class="modal fade"> 
<div class="modal-dialog"> 
<div class="modal-content"> 
<div class="modal-body"> 
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button> 
<iframe class="size" src="https://www.youtube.com/embed/ZHfRHKbd_fE?autoplay=1" ;frameborder="0" allowfullscreen></iframe> 
</div> 
</div> 
</div> 
</div> 
<div id="myModal2" class="modal fade"> 
<div class="modal-dialog"> 
<div class="modal-content"> 
<div class="modal-body"> 
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button> 
<iframe class="size" src="https://www.youtube.com/embed/JCdfecir86Y?autoplay=1" ;frameborder="0" allowfullscreen></iframe> 
</div> 
</div> 
</div> 
</div> 
</div> 

bir JavaScript Sürüm

https://jsfiddle.net/aaronfranco/L6xvLcuL/14/