流星以模态播放 youtube 视频答案

【问题标题】：meteor play youtube video in modal流星以模态播放 youtube 视频
【发布时间】：2015-11-09 18:11:09
【问题描述】：

我正在尝试制作 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") );      
      }
    })
  };

【问题讨论】：

close 按钮至少可以工作吗？我注意到有时您必须单击模态框的左侧才能关闭它。模态框右侧点击无效。
我怀疑这是一个流星事件问题，甚至完全是一个流星问题。

标签： jquery twitter-bootstrap meteor youtube bootstrap-modal

【解决方案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>

【讨论】：