Javascript 反应：如何在引导模式关闭时停止播放iframe视频

我有一个按钮，可以打开一个引导模式，其中包含一个包含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>

---

当我关闭react组件内的模式时，如何使视频停止播放？

为什么要使用iframe？您可以使用react组件来实现这一点。比如这个ex:It，因为除了youtube，我还将使用许多不同提供商的视频，而iframe似乎是唯一可以播放我尝试过的所有其他提供商的解决方案。如果这有道理的话：）这不是正确的解决方案。您可以构建自己的React组件来处理此问题，或者查看上述玩家之一。最后一个允许您提供自己的视频URL。这里的演示我已经尝试过这个组件，但不幸的是它与我真正需要实现的plays.tv不兼容。但是没有办法使用jquery强制iframe停止播放？使用react引导，通过使用类名，您只是隐藏了模式，而不是关闭它。

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>
);
}
}