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>

流星在模态中播放youtube视频

1 个答案: