Youtube Video Still Playing When Bootstrap Modal Closes Youtube Video Still Playing When Bootstrap Modal Closes jquery jquery

Youtube Video Still Playing When Bootstrap Modal Closes


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


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>


take a look at my code I did not need to use any API

// on preview show iframe$('#myModalPrev').on('show.bs.modal', function (e) {  var idVideo = $(e.relatedTarget).data('id');  $('#myModalPrev .modal-body').html('<iframe width="100%" height="400px" src="https://www.youtube.com/embed/' + idVideo + '?autoplay=true" frameborder="0" allowfullscreen></iframe>');});//on close remove$('#myModalPrev').on('hidden.bs.modal', function () {   $('#myModalPrev .modal-body').empty();});

HTML

<a href="#" data-id="5Kp_1Vq6pRg" data-target="#myModalPrev" data-toggle="modal">Abrir Modal</a>    <div class="modal fade" id="myModalPrev" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">            <div class="modal-dialog modal-lg">                <div class="modal-content">                    <div class="modal-header">                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>                        <h4 id="myModalLabel" class="semi-bold">Visualizar <strong>Marca</strong>.</h4>                    </div>                    <hr>                    <div class="modal-body">                        Modal Content                    </div>                    <hr>                    <div class="modal-footer">                        <button type="button" data-dismiss="modal" class="btn btn-primary"><i class="fa fa-times"></i> Fechar</button>                                   </div>                </div>            </div>        </div>

Demo : https://jsfiddle.net/o0ftdvs1/