Youtube Video Still Playing When Bootstrap Modal Closes

Testing here in FireFox 26.0, works as expected. When I either close the Modal or click outside of it and then re-open it - video is back to start and stopped.

EDIT 1

Reproduced in Chrome, the video indeed keeps playing after the Modal is closed.

Try these already answered questions

Stop a youtube video with jquery?

Twitter Bootstrap Modal stop Youtube video

The best way seems to be to use YouTube API to stop the video. Answer that uses this method is available in the questions above.

EDIT 2

This solution seems to be working.

First, get the JS from this post: YouTube iframe API: how do I control a iframe player that's already in the HTML? and include it on the page.

Add this JS after you have loaded the above script (just before the closing body tag)

<script type="text/javascript">
    $('#myModal').on('hidden.bs.modal', function () {
        callPlayer('yt-player', 'stopVideo');
    });
</script>

You will also need to add an ID to the div containing the iframe, as below

<div class="modal-body" id="yt-player">
    <iframe src="//www.youtube.com/embed/sIFYPQjYhv8?rel=0&enablejsapi=1" allowfullscreen="" width="100%" frameborder="0" height="100%"></iframe>
</div>

Here's a little bit lighter of an answer based on dizarter's version and one of the solutions he links to.

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