meteor play youtube video in modal

Question

Я пытаюсь сделать youtube модальным, все работает нормально, но я не могу найти способ остановить его, щелкнув вне модального.

<template name="modal"> 
    <div class="container"> 
    <a type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-1" id="clickMe" href="#">activate the modal</a> 
     <div class="modal" id="modal-1"> 
      <div class="modal-dialog"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
        <iframe id="iframe" width="1280" height="720" src="//www.youtube.com/embed/F0naUkyEkmM" data-autoplay-src="//www.youtube.com/embed/F0naUkyEkmM?autoplay=1"></iframe> 
         <button class="close" type="button" data-dismiss="modal">&times;</button> 
         <h1 class="modal-title">this is a modal</h1> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</template> 


    if (Meteor.isClient) { 
    Template.modal.events({ 
     'click #clickMe': function(event,template){ 
     var vi = jQuery("#iframe"); 
     vi.attr("src", vi.data("autoplay-src"));  
     } 
    }) 
    }; 

Answer 1

сейчас работает! вероятно, мой вопрос не сделал смысл, но это ват он должен делать :)

Template.modal.rendered = function() { 
 
    $('#myModal').on('show.bs.modal', function(event) { 
 
     var modal, src; 
 
     modal = $(this); 
 
     return modal.find('iframe').attr('src', src = "https://www.youtube.com/embed/AGwaa2c2o-A?showinfo=0&autoplay=1"); 
 
    }); 
 
    return $('#myModal').on('hide.bs.modal', function(event) { 
 
     var modal; 
 
     modal = $(this); 
 
     return modal.find('iframe').attr('src', ''); 
 
    }); 
 
    };

<template name="modal"> 
 
    <button href="#" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg"></button> 
 
    <div class="modal fade bs-example-modal-lg" id="myModal" role="dialog" aria-labelledby="gridSystemModalLabel"> 
 
    <div class="modal-dialog modal-lg" role="document"> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> 
 
      </button> 
 
      <h4 class="modal-title text-center" id="gridSystemModalLabel">yo wassp!</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <iframe width="871" height="480" src="https://www.youtube.com/embed/AGwaa2c2o-A?showinfo=0" frameborder="0" allowfullscreen></iframe> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</template>