title: Youtube Video Autoplay in popup
body: <p>I've made a popup and placed a youtube video in it. I set video to autoplay. But the problem is video plays when i open the page. It is auto play in global and i want it to autoplay when popup shows. I did not find any solution for it. </p>
  
  <p>Currently, It playing like i have background ghost saying something.
  Can anyone help?</p>
  
  <p>Video Html</p>
  
  <p></p>
  
  <pre><code>    &lt;iframe width="800" height="315" src="http://www.youtube.com/embed/?wmode=opaque&amp;amp;autoplay=1&amp;amp;rel=0&amp;amp;color=white" frameborder="0"&gt;&lt;/iframe&gt;&lt;a href="http://www.youtube.com" target="_blank"&gt;&lt;img alt="" class="watermark" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQHcbyVSjHQlwCy3tYqOyLwSWDO4tblhxTVVjKV5R0PtFsPy9TwfA" /&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Calling popup</p>
  
  <pre><code> &lt;a href="#" data-reveal-id="video_pop"&gt;&lt;img src="kaow.png"/&gt;&lt;/a&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Popup Content</p>
  
  <pre><code>&lt;div id="video_pop" class="reveal-modal medium"&gt;
      &lt;a class="close-reveal-modal"&gt;&lt;/a&gt;
       &lt;div&gt;
  
      &lt;iframe width="800" height="315" src="http://www.youtube.com/embed/?wmode=opaque&amp;amp;autoplay=1&amp;amp;rel=0&amp;amp;color=white" frameborder="0"&gt;&lt;/iframe&gt;&lt;a href="http://www.youtube.com" target="_blank"&gt;&lt;img alt="" class="watermark" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQHcbyVSjHQlwCy3tYqOyLwSWDO4tblhxTVVjKV5R0PtFsPy9TwfA" /&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>Foundation.libs.reveal = {
      name: "reveal",
      version: "4.2.2",
      locked: !1,
      settings: {
          animation: "fadeAndPop",
          animationSpeed: 250,
          closeOnBackgroundClick: !0,
          closeOnEsc: !0,
          dismissModalClass: "close-reveal-modal",
          bgClass: "reveal-modal-bg",
          open: function() {},
          opened: function() {},
          close: function() {},
          closed: function() {},
          bg: a(".reveal-modal-bg"),
          css: {
              open: {
                  opacity: 0,
                  visibility: "visible",
                  display: "block"
              },
              close: {
                  opacity: 1,
                  visibility: "hidden",
                  display: "none"
              }
          }
      },
      init: function(b, c, d) {
          return Foundation.inherit(this, "data_options delay"), "object" == typeof c ? a.extend(!0, this.settings, c) : "undefined" != typeof d &amp;&amp; a.extend(!0, this.settings, d), 
          "string" != typeof c ? (this.events(), this.settings.init) : this[c].call(this, d);
      },
      events: function() {
          var b = this;
          return a(this.scope).off(".fndtn.reveal").on("click.fndtn.reveal", "[data-reveal-id]", function(c) {
              c.preventDefault();
              if (!b.locked) {
                  var d = a(this), e = d.data("reveal-ajax");
                  b.locked = !0;
                  if ("undefined" == typeof e) b.open.call(b, d); else {
                      var f = e === !0 ? d.attr("href") : e;
                      b.open.call(b, d, {
                          url: f
                      });
                  }
              }
          }).on("click.fndtn.reveal", this.close_targets(), function(c) {
              c.preventDefault();
              if (!b.locked) {
                  var d = a.extend({}, b.settings, b.data_options(a(".reveal-modal.open")));
                  if (a(c.target)[0] === a("." + d.bgClass)[0] &amp;&amp; !d.closeOnBackgroundClick) return;
                  b.locked = !0, b.close.call(b, a(this).closest(".reveal-modal"));
              }
          }).on("open.fndtn.reveal", ".reveal-modal", this.settings.open).on("opened.fndtn.reveal", ".reveal-modal", this.settings.opened).on("opened.fndtn.reveal", ".reveal-modal", this.open_video).on("close.fndtn.reveal", ".reveal-modal", this.settings.close).on("closed.fndtn.reveal", ".reveal-modal", this.settings.closed).on("closed.fndtn.reveal", ".reveal-modal", this.close_video), 
          a("body").bind("keyup.reveal", function(c) {
              var d = a(".reveal-modal.open"), e = a.extend({}, b.settings, b.data_options(d));
              27 === c.which &amp;&amp; e.closeOnEsc &amp;&amp; d.foundation("reveal", "close");
          }), !0;
      },
      open: function(b, c) {
          if (b) if ("undefined" != typeof b.selector) var d = a("#" + b.data("reveal-id")); else {
              var d = a(this.scope);
              c = b;
          } else var d = a(this.scope);
          if (!d.hasClass("open")) {
              var e = a(".reveal-modal.open");
              "undefined" == typeof d.data("css-top") &amp;&amp; d.data("css-top", parseInt(d.css("top"), 10)).data("offset", this.cache_offset(d)), 
              d.trigger("open"), e.length &lt; 1 &amp;&amp; this.toggle_bg(d);
              if ("undefined" == typeof c || !c.url) this.hide(e, this.settings.css.close), this.show(d, this.settings.css.open); else {
                  var f = this, g = "undefined" != typeof c.success ? c.success : null;
                  a.extend(c, {
                      success: function(b, c, h) {
                          a.isFunction(g) &amp;&amp; g(b, c, h), d.html(b), a(d).foundation("section", "reflow"), 
                          f.hide(e, f.settings.css.close), f.show(d, f.settings.css.open);
                      }
                  }), a.ajax(c);
              }
          }
      },
      close: function(b) {
          var b = b &amp;&amp; b.length ? b : a(this.scope), c = a(".reveal-modal.open");
          c.length &gt; 0 &amp;&amp; (this.locked = !0, b.trigger("close"), this.toggle_bg(b), this.hide(c, this.settings.css.close));
      },
      close_targets: function() {
          var a = "." + this.settings.dismissModalClass;
          return this.settings.closeOnBackgroundClick ? a + ", ." + this.settings.bgClass : a;
      },
      toggle_bg: function(b) {
          0 === a(".reveal-modal-bg").length &amp;&amp; (this.settings.bg = a("&lt;div /&gt;", {
              "class": this.settings.bgClass
          }).appendTo("body")), this.settings.bg.filter(":visible").length &gt; 0 ? this.hide(this.settings.bg) : this.show(this.settings.bg);
      },
  </code></pre>
  
  <p><strong>EDITED:</strong></p>
  
  <p>I am using <strong>Foundation 5 Reveal Model</strong> for popup: <a href="http://foundation.zurb.com/docs/components/reveal.html">http://foundation.zurb.com/docs/components/reveal.html</a></p>