title: React: How to Stop iframe video from playing when Bootstrap Modal is closed
body: <p>I got a button that opens a bootstrap modal with a <code>iframe</code> element containing a youtube video, but when I close down the modal the video keeps playing, how do I get it to stop playing when the modal is closed?</p>
  
  <p><strong>Button to open modal:</strong></p>
  
  <pre><code>&lt;a data-toggle="modal" data-target="#myModal" href="#" className="btn btn-
  rounded btn-sm btn-primary"&gt;&lt;i className="fa fa-fw fa-plus"&gt;&lt;/i&gt; Open Modal&lt;/a&gt;
  </code></pre>
  
  <p><strong>My react component with a modal containing the <code>iframe</code> video</strong></p>
  
  <pre><code>class Modal extends Component {
    constructor(){
      super()
      this.state = {
      }
  
   render() {
      return (
       &lt;div id="myModal" className="modal fade"&gt;
          &lt;div className="modal-dialog"&gt;
              &lt;div className="modal-content"&gt;
                  &lt;div className="modal-header"&gt;
                      &lt;button type="button" className="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                      &lt;h4 className="modal-title"&gt;YouTube Video&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div className="modal-body"&gt;
                      &lt;iframe id="cartoonVideo" width="560" height="315" src="https://www.youtube.com/embed/XGSy3_Czz8k" frameBorder="0" allowFullScreen&gt;&lt;/iframe&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  );
  }
  }
  </code></pre>
  
  <p>How would I make the video stop playing when I close down the modal inside a react component?</p>