Video keeps playing after closing modal

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

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.