Stop playing video in iframe when modal is closed
Solution 1
I managed to get it to work with the link that @Leo provided. But it was slow as it reloaded the frame everytime the link was clicked. Tried @guillesalazar solution from Twitter Bootstrap Modal stop Youtube video and it worked perfectly. This was the solution I used.
$("#myModal").on('hidden.bs.modal', function (e) {
$("#myModal iframe").attr("src", $("#myModal iframe").attr("src"));
});
Solution 2
Well you can simply remove the src of the iframe and the put back again like ;
<iframe id="videosContainers" class="yvideo" src="https://www.youtube.com/embed/kjsdaf ?>" w></iframe>
<span onclick="stopVideo(this.getAttribute('vdoId'))" vdoId ="yvideo" id="CloseModalButton" data-dismiss="modal"></span>
now the Jquery part
function stopVideo(id){
var src = $j('iframe.'+id).attr('src');
$j('iframe.'+id).attr('src','');
$j('iframe.'+id).attr('src',src);
}
Solution 3
You just need to stop the video on the hidden.bs.modal
event:
$('#myModal').on('hidden.bs.modal', function () {
player.stopVideo();
// or jQuery
$('#playerID').get(0).stopVideo();
// or remove video url
$('playerID').attr('src', '');
})
Here is a very similar (if not equal) to what you need to do: http://www.tutorialrepublic.com/codelab.php?topic=faq&file=play-youtube-video-in-bootstrap-modal
They do not use the iframe API so everytime they close the modal they just delete the video url .attr('src', '');
Solution 4
For multiple modals with iframe videos, here is the solution:
$('#myModal').on('hidden.bs.modal', function(e) {
var $iframes = $(e.target).find('iframe');
$iframes.each(function(index, iframe){
$(iframe).attr('src', $(iframe).attr('src'));
});
})
On modal close, it goes through all the iframe videos and resets them instead of resetting all of them to the first video.
Solution 5
// Simple and clean
Try using class or ID before Iframe to refresh/reload the particular video. Otherwise, it will reload all iframe source.
$( id/class + 'iframe').attr('src', $('iframe').attr('src'));
![Michelle Ashwini](https://i.stack.imgur.com/EbX80.jpg?s=256&g=1)
Michelle Ashwini
"The mind is its own place, and in itself can make a heaven of hell, a hell of heaven."
Updated on July 21, 2022Comments
-
Michelle Ashwini almost 2 years
I have a play image with text 'Watch video', when clicked would open up a bootstrap modal window to play the video i put in. I've got the moday view to work. The problem I'm having with this is when I play the video and exit the screen while it is being played, the video continues to play in the background. If I click on the Watch Video link again, it would play the video from where it stopped off previously.
I need to have the video stop when the modal window is closed. It needs to then play the video from the start the next time I click the "Watch video" link. I'm still new to this and am not sure how to do this. Anyone know how I can achieve this?
<div class="col-md-12 f-play" data-toggle="modal" data-target="#myModal"> <img class="f-play-image" src="images/play.svg" data-target="#myModal" data-video-fullscreen="">Watch video </div> <div id="myModal" class="modal fade" role="dialog" tabindex='-1'> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/7pvci1hwAx8?" allowfullscreen="" width="640" height="360" frameborder="0"></iframe> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>
-
Michelle Ashwini over 7 yearsI've added this script, but it still does not stops the video when I click close.
-
Leonardo Lanchas over 7 yearsWhat version of Bootstrap are you using? Are you using the Youtube iframe API? Can you post a working example?
-
Michelle Ashwini over 7 yearsI'm using version 3.3.7 of Bootstrap. I dont think I'm using the youtube API. I'll add my code to codepen and link it here
-
Leonardo Lanchas over 7 yearsI have edited the answer, with another example where the video is embedded manually in an iframe
-
Michelle Ashwini over 7 yearsThank you! I put my existing code into codepen and it wasnt working. I did find a solution , but could not understand it very much. The link you included helped me solve my problem and I understand it. Thanks!:)
-
ControlZ about 4 yearsThis does not work for a Vimeo video. The video continues to play after the modal window is closed. Does anyone know a solution?
-
Warface about 4 yearsAhah so dumb and simple, replacing the src attribute by the same value indeed works
-
m.arthur almost 3 yearsYou say "multiple modals" but then specify '#myModal' in the code, which is a unique identifier for a single modal ID, therefore by definition not multiple. How would you actually write a jQuery function to deal with a page that generates multiple modals? (that is, how to dynamically select the modal that is actually opened, among the multiples?)
-
ecooper10 about 2 years
hidden.bs.modal
needed changed tohide.bs.modal
for me to get this to work.