React：如何在Bootstrap Modal关闭时停止播放iframe视频

Question

我有一个按钮，打开一个包含youtube视频的iframe元素的引导模态，但是当我关闭模式时视频会继续播放，当模态关闭时如何让它停止播放？

按钮打开模态：

<a data-toggle="modal" data-target="#myModal" href="#" className="btn btn-
rounded btn-sm btn-primary"><i className="fa fa-fw fa-plus"></i> Open Modal</a>

我的反应组件包含一个包含iframe视频的模式

class Modal extends Component {
  constructor(){
    super()
    this.state = {
    }

 render() {
    return (
     <div id="myModal" className="modal fade">
        <div className="modal-dialog">
            <div className="modal-content">
                <div className="modal-header">
                    <button type="button" className="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 className="modal-title">YouTube Video</h4>
                </div>
                <div className="modal-body">
                    <iframe id="cartoonVideo" width="560" height="315" src="https://www.youtube.com/embed/XGSy3_Czz8k" frameBorder="0" allowFullScreen></iframe>
                </div>
            </div>
        </div>
    </div>
);
}
}

当我关闭反应组件中的模态时，如何停止播放视频？