title: How to stop autoplaying youtube iframe video?
body: <p>I do have an embedded youtube iframe video, which is autoplaying on click. Now, I have to stop this autoplaying iframe video while clicking on outside(window) or close button. I have tried multiple things, but both scenario is not working together, like if video would get stop then, autoplay will not work &amp; vice versa. Following is my code.</p>
  
  <p>// This is the case when video is getting stopped on clicking outside, but autoplay is not working </p>
  
  <pre><code>&lt;div id="modalVideo" class="modal fade"&gt;
                      &lt;div class="modal-dialog"&gt;
                          &lt;div class="modal-content"&gt;
                              &lt;div class="modal-header"&gt;
                                  &lt;button type="button" class="close" data-dismiss="modal"
                                      aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                                  &lt;img alt="Brand" src="{{ 'logo@2x.png' | asset_url }}" height="20"&gt;
                              &lt;/div&gt;
                              &lt;div class="embed-responsive embed-responsive-16by9"&gt;
                                  &lt;iframe class="embed-responsive-item" width="560" height="315"
                                      src="https://www.youtube.com/embed/aqkGCzcx34A?enablejsapi=1&amp;version=3&amp;playerapiid=ytplayer&amp;autoplay=1"
                                      frameborder="0"
                                      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                                      allowfullscreen&gt;&lt;/iframe&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
  &lt;script&gt;
  $(window).click(function () {
          $('.embed-responsive-item')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>// This is the case when autoplay is working, but video is not getting stopped</p>
  
  <pre><code>&lt;div id="modalVideo" class="modal fade"&gt;
                      &lt;div class="modal-dialog"&gt;
                          &lt;div class="modal-content"&gt;
                              &lt;div class="modal-header"&gt;
                                  &lt;button type="button" class="close" data-dismiss="modal"
                                      aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                                  &lt;img alt="Brand" src="{{ 'logo@2x.png' | asset_url }}" height="20"&gt;
                              &lt;/div&gt;
                              &lt;div class="embed-responsive embed-responsive-16by9"&gt;
                                  &lt;iframe class="embed-responsive-item" width="560" height="315"
                                      src="https://www.youtube.com/embed/aqkGCzcx34A?autoplay=1"
                                      frameborder="0"
                                      allow="autoplay"
                                      allowfullscreen&gt;&lt;/iframe&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
  &lt;script&gt;
  $(window).click(function () {
          $('.embed-responsive-item')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Kindly help me out if you guys have faced similar situation or problem.</p>