隐藏时清除模态内容

Question

我有这段代码，不知道如何重置内容，在这种情况下是youtube。当关闭并打开另一个时，它是相同的视频。

$(document).ready(function() {
/* Get iframe src attribute value i.e. YouTube video url
and store it in a variable */
var url = $("#cartoonVideo").attr('src');
/* Assign empty url value to the iframe src attribute when
modal hide, which stop the video playing */
$("#myModal").on('hide.bs.modal', function() {
$("#cartoonVideo").attr('src', '');
// remove the bs.modal data attribute from it
$(this).removeData('bs.modal');
// and empty the modal-content element
$('#modal-body .cartoonVideo').empty();
});
/* Assign the initially stored url back to the iframe src
attribute when modal is displayed again */
$("#myModal").on('show.bs.modal', function() {
$("#cartoonVideo").attr('src', url);
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://thietkemenunhahang.com/jsvideomodal.js"></script>
<!-- Button HTML (to Trigger Modal) -->
<a href="#myModal" class="xemvideo" data-toggle="modal">XEM VIDEO</a>
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<div class="modal-body">
<iframe id="cartoonVideo" width="1024" height="768" src="https://www.youtube.com/embed/g_ETwB2rhXMvq" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>

不工作。有人可以帮助我吗？:(

Answer 1

你可以像这样清除Iframe：

$("#myModal").on('hide.bs.modal', function() {   
var iframe = document.getElementById("cartoonVideo");
iframedoc =iframe.contentDocument || iframe.contentWindow.document;
iframedoc.body.innerHTML = '';
});

并在"show.bs.modal"事件中设置新的"src">

<a href="#myModal" class="xemvideo" data-toggle="modal" data-video="https://www.youtube.com/embed/pbQ2k4Q8y0o">XEM VIDEO 1</a>
<a href="#myModal" class="xemvideo" data-toggle="modal" data-video="https://www.youtube.com/embed/d46GppZFjbc">XEM VIDEO 2</a>    

$("#myModal").on('show.bs.modal', function(e) {
var btn = $(e.relatedTarget);
var url= btn.data("video");
$("#cartoonVideo").attr('src', url);
});