bootstrap video modal popup
<p>trying to create a video modal where it contains 3 images placed next to each other with individual modal..on click of these images a video modal pops up.so i created 3 separate ids in the JavaScript that on clicking will open 3 different videos..but the problem is I am able to play 2 videos the first and second but the third one does not play.when the third image is clicked it plays the first video.just unable to play individual videos on clicking individual images.how do i fix it</p>

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

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

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

});
&lt;/script&gt;

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