Stop Video From Playing When Modal Closes
Solution 1
Use the hidden.bs.modal
event.
This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
$(function(){
$('#myModal').modal({
show: false
}).on('hidden.bs.modal', function(){
$(this).find('video')[0].pause();
});
});
Solution 2
I hope this Plunker might help you, I used the same to get the solution.
HTML: Autostop Videos in Closed Modal
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link rel="stylesheet" href="style.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Autostop Videos in Closed Modal</h1>
<ul class="nav" >
<li><a href="#" data-toggle="modal" data-target="#video1">Video 1</a></li>
<li><a href="#" data-toggle="modal" data-target="#video2">Video 2</a></li>
</ul>
<div class="modal fade" id="video1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" >
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Video 1</h4>
</div>
<div class="modal-body">
<iframe src="//player.vimeo.com/video/108792063" width="500" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div class="modal fade" id="video2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" >
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Video 2</h4>
</div>
<div class="modal-body">
<iframe src="//player.vimeo.com/video/69593757" width="500" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</body>
</html>
JS:
$(function(){
$('.modal').on('hidden.bs.modal', function (e) {
$iframe = $(this).find("iframe");
$iframe.attr("src", $iframe.attr("src"));
});
});
Solution 3
Without adding any JS, you can just write a simple onclick action to pause your video when the user close the modal.
onclick="document.getElementById('demoVideo').pause();"
remember to change 'demoVideo'
to your own #VideoID
.
Complete code :
<a href="#myVideo"data-toggle="modal" onclick="document.getElementById('demoVideo').play();">--> Watch Video</a>
<!-- Modal -->
<div id="myVideo" class="modal fade" style="display: none;" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"
onclick="document.getElementById('demoVideo').pause();">×</button>
<h4 class="modal-title">Demo Video</h4>
</div>
<div class="modal-body">
<video id="demoVideo" width="560" height="315" controls >
<source src="images/mydemovideo.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
*remember to change the src
to your video's.
Solution 4
If you have unlimited modals loaded dynamically, then use this:
(function ($) {
$(document).on('hidden.bs.modal', function (e) {
var video = document.getElementById('player-' + e.target.id);
video.pause();
video.currentTime = 0;
});
})(jQuery);
randomuser12345
Updated on November 27, 2020Comments
-
randomuser12345 over 3 years
I'm using the video tag in HTML that opens in a modal. Currently it is still playing if I exit the modal without pausing the video. I have no javascript yet, as everything I add doesn't work. I'm using bootstrap also. Here is my HTML:
<button type="button" data-toggle="modal" data-target="#myModal"> <h4>SHORT SLEEVED SHIRT<br><br>$20</h4> <img src="images/femaleshortsleeved.jpg"> </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <video class="video" width="960px" controls> <source src="images/Short Sleeved Shirt.mp4" type="video/mp4"> </video> <h2>Short Sleeved Shirt<br>$20</h2> <h5>90s lightweight brown patterned shirt.<br>No marked size.<br>Will fit S to M.<br>Length: 62cm<br>Width: 56cm</h5> <button type="button" class="btn btn-primary btn-lg">BUY NOW</button> </div> </div> </div>