Video keeps playing after closing modal - html

Question

When I close my modal, the video keeps playing in the background. It is a really small program with only HTML and CSS, so I don't want to use the YouTube API. This is my modal code:
<div id="lucaModal" class="modal modal-fullscreen" role="dialog">
<button id="lucaButton" class="btn btn-danger closeIFrame" data-dismiss="modal">
CLOSE
</button>
<div class="modal-content">
<iframe class="trailer" id="trailer" title="YoutubeVideoPlayer"
style="height: 100%; width: 100%;"
src="https://www.youtube.com/embed/mYfJxlgR2jw" frameborder="0">
</iframe>
</div>
</div>
I tried jQuery, but my modal wouldn't close this way:
$(document).ready(function(){
$("#lucaModal").modal('show');
$("#lucaButton").click(function(){
$("#lucaModal").modal('hide');
});
});

Answer 1

So I've played around with your code and found a way around this.
Below I used JQuery to solve your.
//below is click detector that checks if the user has clicked anywhere
$('body').on('click',function(){
//if the modal is no longer visible on the screen
if(!$('#lucaModal').is(':visible')){
//we get the src of the current video
var trailer = $('#trailer').attr('src');
//and reset it, that will sort out your problem
$('#trailer').attr('src',trailer);
}
});
Just copy and paste the code above to your js file and see if it works. If it does then play around with it, maybe you can create an even better way of handling this issue.
Thanks.