Bootstrap Videomodal Popup

Question

versucht, ein Videomodal zu erstellen, wo es 3 Bilder nebeneinander mit einzelnen modal..on Klick dieser Bilder ein Video Modal Pops-Up.so ich habe 3 separate IDs in der JavaScript, dass auf Klicken öffnet 3 verschiedene Videos..aber das Problem ist, ich bin in der Lage, 2 Videos das erste und zweite zu spielen, aber das dritte wird nicht abgespielt. Wenn das dritte Bild angeklickt wird, spielt es das erste Video.nur nicht in der Lage, einzelne Videos zu spielen individuelle images.how klicken kann ich es beheben

<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

Sie Javascript nicht brauchen die Modalverben zu öffnen. Sie können einfach die HTML-Tags verwenden. Allerdings müssen Sie die Wiedergabe mit JavaScript steuern (Stopp beim Schließen usw.).

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

Hier ist eine JavaScript-Version

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