关闭模态时停止 Youtube 视频

Question

我有一个打开 Youtube 视频的模式。模式设置为在您重置会话时打开。

我正在努力做到这一点，以便当您关闭模式（通过点击“x”或单击模式外的任何位置）时，youtube 视频会停止播放，但我不知所措。

到目前为止，这是我的代码：

//resetting/refreshing the session:
jQuery(document).ready(function(){
if (sessionStorage.getItem("story") !== 'true') {
  sessionStorage.setItem("story", "true");
  $("#myModal").modal();
  }

$('#reset-session').on('click',function(){
sessionStorage.setItem('story','');
});
});

//my attempt at stopping the video:

function toggleVideo(state) {
    // if state == 'hide', hide. Else: show video
    var div = document.getElementById("myModal");
    var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
    div.style.display = state == 'hide' ? 'none' : '';
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    iframe.postMessage('{"event":"command","func":"' + func + '","args":""}','*');
}

 body {
    background-color: #335C64; 
    margin:10px;
 }
 

    h4 {
      color: #FFD5C2;
  }

  .desc {
    color: #FFD5C2;
    margin-bottom: 4px;
    }
  .btn-sm {
    margin-bottom: 15px;
  }

   
 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<h4>Bootstrap Modal with SessionStorage</h4>
<hr />
<p class="desc">
  Click this button to <strong>Refresh</strong> the page.
</p>
<a href="" id="refresh-page" class="btn btn-info btn-sm">
  Refresh Page
</a>

<p class="desc">
  Click this button to <strong>Reset</strong> and <strong>Refresh</strong> the page. 
</p>
<a href="" id="reset-session" class="btn btn-warning btn-sm">
  Reset Session
</a>

<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title text-primary">Victor Frankenstein</h4>
</div>
<div class="modal-body">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/VZzZKuQUguk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal"> Close </button>
</div>
</div> 
</div> 
</div> 

这是一个代码笔：https://codepen.io/jackcode1/pen/ZEpbRQq

Answer 1

我找到了一个简单的，也许太简单的解决方案：

$("#myModal").on('hidden.bs.modal', function (e) {
    $("#myModal iframe").attr("src", $("#myModal iframe").attr("src"));
});

就是这样。我想我把这个复杂化了。