2015-08-17 129 views
1

我想使youtube模態,一切工作正常,但我無法找到方法來通過單擊外部模式來阻止它。流星播放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"));  
     } 
    }) 
    }; 
+0

至少請問'close'按鈕的工作?我注意到有時你必須點擊模式左邊才能關閉它。點擊模式右側將不起作用。 – FullStack

+0

我懷疑這是一個Meteor事件問題,甚至是一個Meteor問題。 –

回答

0

現在工作!可能是我的問題didnt意義,但這是笏它應該做的:)

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>